DIV Height:Auto; vs Height:#px

HTML & CSS
1

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 the .container height to e.g. 400px. However the project this is for requires the height to be dynamic. 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

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%;
}
-->

<div class="container" id="contain"><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>
2

Hi,

Welcome to Sitepoint:)

It might be easier if you had a drawing of the layout you want to achieve so we could see what it should look like:)

I can tell you that what you are doing isn’t going to work in any usable way though (unfortunately).

You can only use 100% height on elements that have parents with a known height. If the parent is height:auto then the height:100% collapses to auto also. Even if the height:100% worked you would then be limited by it and it could never grow. The FAQ sticky thread at the top of the forum has an entry on 100% height that you might like to read and help clarify the issue.

If your layout was an attempt to create equal height columns with full colour (different) backgrounds then you should know that the only element that will do that is easily is a a row of table cells or elements using the display:table-cell property (which are not supported in IE6 or 7).

The usual method of creating this effect is to either use " faux background" image to repeat an image on the parent to create the illusion of columns. Or you can use one of my overlay methods to create columns without images like so:

http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm

You should also avoid the use of absolute positioning as that element (.test) you placed will be removed from the flow and will not relate to the other elements. The margin-top:40% you placed on it will not really be what you want because the margin would be based on the width of the parent element.

You can find more info on equal columns here.

3

You’ve got it right I don’t think it will work - I did look at faux columns but the only issue I had with that was if the height wasn’t defined then like you say the margin-top:40% would fail. It’s for a wp theme so I think I’ll just add an admin option to specify a greater or lower height if need be.

Thanks for your help!

4

Ok - Hope you get it sorted ok :slight_smile: