By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

positioning (should be easy)

P: 145
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:
<div id="bigellement">
<div id="left"> </div>
<div id="main">Variable height of data</div>
<div id="right"> </div>
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;}
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
Share this Question
Share on Google+
2 Replies

Expert 5K+
P: 7,435
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>

Jan 5 '08 #2

P: 145
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.