Solved

Tables not playing nicely.

Posted on 2011-02-23
2
215 Views
Last Modified: 2012-05-11
Hello,

Please see the attached code for a table. What I'm expecting is when the text is resized, the two middle row of the two outer tables should expand vertically taking up as much space as possible... Can anybody spot anything obvious?

Thanks.
Uni
.FullHeight{
	height:100%;
}

.BoxSize{
	width:20px;
	height:20px;
}

<table>
	<tr>
		<td class="FullHeight">
			<table>
				<tr><td class="BoxSize"><img src="tl.png"/></td></tr>
				<tr><td class="FullHeight"></td></tr>
				<tr><td class="BoxSize"><img src="bl.png"/></td></tr>
			</table>
		</td>
		<td>Test</td>
		<td class="FullHeight">
			<table>
				<tr><td class="BoxSize"><img src="tr.png"/></td></tr>
				<tr><td class="FullHeight"></td></tr>
				<tr><td class="BoxSize"><img src="br.png"/></td></tr>
			</table>
		</td>
	</tr>
</table>

Open in new window

0
Comment
Question by:Unimatrix_001
2 Comments
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
Comment Utility
For a full height of a child container, the wrapping container should be set also to 100%, begin with body.
0
 
LVL 3

Author Closing Comment

by:Unimatrix_001
Comment Utility
Thank you! :)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now