WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Height:auto vs Height:static

Reply
  Thread Tools Display Modes
Old 15th April 10, 10:11 AM   #1
cwz000
WLC Member
 
Join Date: Apr 2010
Posts: 3
Default Height:auto vs Height:static

Hi Guys, I'm brand new here so hello!

I apologise if this has been covered, I've tried searching for it but can't find what I'm looking for.

The the below layout works perfect if I set a static height e.g. 400px. However the project this is for requires the height to be flexible. When I switch the .container to height:auto; it completely destroys the layout.

Is there a way around this without setting a static height.

Thanks
Code:
body,html {
height: 100%;
}
.container {
height:auto;
width:500px;
background:#CC3300;
position:relative;
}
.left {
float:left;
position:relative;
width:100px;
background:#66CC33;
height:100%;
display: inline;
}
.panel {
float:left;
width:120px;
position:relative;
background:#66CC33;
height:100%;
display: inline;
}
.test {
position:absolute;
margin-top:40%;
}
-->
Code:
<div class="container"><div class="left"><div class="test">Content for New Div Tag Goes Here</div></div><div class="panel">Content for New Div Tag Goes Here<br />
Content for New Div Tag Goes Here<br />
Content for New Div Tag Goes Here<br />
Content for New Div Tag Goes Here<br />
Content for New Div Tag Goes Here<br />
</div><div class="panel">Content for New Div Tag Goes Here</div>
<div style="clear:both"></div>
</div>
cwz000 is offline   Reply With Quote
Old 15th April 10, 05:26 PM   #2
dhaydencj
WLC Member
 
Join Date: Mar 2010
Posts: 22
Default Re: Height:auto vs Height:static

I feel like this is similar to a problem I was running into and got help on here, although I wasn't using a float, so the solution may be different.

But I think the problem is the same - when you use the auto the content isn't always enough to take up the entire column and thus you end up with the wonky setting.

Would a simple solution of setting a min-height property of 400px for the container, panel, and test <div>s work? The only problem I saw with that was that the "left" <div> ended up on top of the "test" <div>, but I think that's because of the absolute positioning of "test" combined with the float of the "left" <div>.

Alternatively you could set up a wrap div with a set height or min-height, but if you don't want to use it on the existing <div>s, that probably isn't going to work.

I ended up added in a wrap <div> who's only property was "overflow:auto;" and removing the absolute positioning of the <div>s and that solved the problem for me.

Hope some of that helps!
dhaydencj is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:34 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.