468,237 Members | 2,001 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,237 developers. It's quick & easy.

positioning (should be easy)

Jezternz
145 100+
ok I have 3 elements inside one larger centered element.
The 3 elements are floating left.. inside the larger element.
Each of the three smaller elements have defined widths (10px, 500px, 10px)
The middle one has an unkown height (could be anything).

Elements are layed out as follows:
xhtml:[html]
<div id="bigellement">
<div id="left"> </div>
<div id="main">Variable height of data</div>
<div id="right"> </div>
</div>[/html]
css:
Expand|Select|Wrap|Line Numbers
  1. body{margin:0px;}
  2. #bigellement{margin:0px auto;width:520px;}
  3. #left, #right{width:10px;float:left;height:100%}
  4. #innercontainer{float:left;width:500px;}
  5.  
Currently the (main) element will increase in height. And the Bigellement will then extend as it needs to, however, even if i give 'left' and 'right' the values for height:100%; these do not grow, they stay small and do not go all the way down to meet with main.

How can I fix this?
Jan 5 '08 #1
2 899
drhowarddrfine
7,435 Expert 4TB
When you set left and right to height:100% you have to think "100% of what?" It's 100% of the parent element, in this case, bigellement. So you set that to 100% but, again, 100% of what? It's parent is <body>, so body{height:100%} but, 100% of what? <html>

html,body{
height:100%
}
Jan 5 '08 #2
Jezternz
145 100+
wow, thankyou very much, works like a charm.

Edit: Ok thats... a huge improvement from where I was at, However as soon as the main element is enlarged, and the bigellement is then automaticly enlarged, the side elements (set at 100%) do not, they stay at the height of the page. How can I make it so that they enlarge as the main element enlarges. Am I going about this the right way?
Thansk heaps
Jan 5 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Philipp Lenssen | last post: by
1 post views Thread by Charles Harrison Caudill | last post: by
10 posts views Thread by Matt Silberstein | last post: by
4 posts views Thread by Alan Silver | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.