Log in

View Full Version : CSS Layout - Auto Height Adjusting - Please Help


me_myself
01-09-2008, 06:09 PM
I'm breaking my head getting this done. Any help in this would be greatly appreciated - here's my problem-

I have three div's one below the other. The height for the top div is fixed. The middle div is a container and has two div's inside it. This container should be liquid and stretch/contract based on the browser resolution. The bottom div is a container and has two div's inside it- this has fixed height. My problem is the middle div - making it expand and contract based on the browser height.

Please see the image below to understand the scenario -
http://www.bandexch.com/images/css_layout.jpg

Thanks a lot in advance.
Medyman
01-13-2008, 04:21 PM
Here you go:


<html>
<head>
<style>

html,body {text-align:center; font:bold 12px "Lucida Sans Unicode"; height:100%; }
#container { width:850px; height:100%;}
#top { width:100%; height:100px; border:1px solid #000; }
#middle { height:30%; border:1px solid #ff0000; padding:3px; }
#bottom { height:300px; border:1px solid #ff0000; padding:3px; }

.left { float:left; border:1px solid #000; height:100%; width:200px; }
.right { border:1px solid #000; height:100%; }



</style>
</head>
<body>

<div id='container'>
<div id='top'>Fixed Height</div>

<br style='clear:both;' />

<div id='middle'>
<div class='left'>Liquid Height</div>
<div class='right'>Liquid Height</div>
</div>

<br style='clear:both;' />

<div id='bottom'>
<div class='left'>Fixed Height</div>
<div class='right'>Fixed Height</div>
</div>
</div>


</body>
</html>

Note: It's not full code. You'll need to add doctypes, other declerations, <title></title> etc... But the code will work for the basic layout.

I've highlighted the where the heights are set. You'll want to change these to your liking. Also, remove the borders, padding etc... per your preferance. The KEY to all of this working is the 100% height on the body tag. This allows you to set relative percentage heights based on the height of the browser.
me_myself
01-15-2008, 10:17 PM
Thanks a lot for the help, Medyman.
phusion
03-10-2008, 08:46 PM
I am breaking my head as well with the CSS for an auto adjusting element in a list.

I have included the code which I am using... You should get the concept. I am going to have a list of elements which are going to each have two or three columns basically. I want each element to be at least 100px tall, but they may contain images or text which should make all of the columns adjust.

Thanks in advance.



html, body {
height: 100%;
}

div.activity_list_item {
border: 1px solid #ccc;
position: relative;
width: 500px;
min-height: 100px;
height: auto;
display: block;
margin-bottom: 10px;
}

div.activity_type {
background-color: #990000;
float: left;
display: block;
width: 50px;
height: 100%;
color: #FFFFFF;
}

div.activity_info {
height: auto;
width: 238px;
display: block;
float: left;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px;
}

div.activity_pic {
height: auto;
width: 200px;
display: block;
float: left;
}

-->
</style>

</head>

<body>

<div class="activity_list_item">
<div class="activity_type">
Pic tag
</div>
<div class="activity_info">
Some random information about the picture
</div>
<div class="activity_pic">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="200"/>
</div>
</div>

<div class="activity_list_item">
<div class="activity_type">
Pic tag
</div>
<div class="activity_info">
Some random information about the picture
</div>
<div class="activity_pic">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="200"/>
</div>
</div>
boogyman
03-10-2008, 08:54 PM
I want each element to be at least 100px tall, but they may contain images or text which should make all of the columns adjust.


This will only work in IE7+ and standards compliant browsers, but you can assign a minimum height in your css declarations



selector.class {
height: 100%;
min-height: 100px;
}


also you are abusing the <div> element. the div tag was designed more for layout, while the p (paragraph) was designed for containing text.

<div class="activity_list_item">
<div class="activity_type">
Pic tag
</div>
<div class="activity_info">
Some random information about the picture
</div>
<div class="activity_pic">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="200"/>
</div>
</div>


to

<div class="activity_list_item">
<p class="activity_type">
Pic tag
</p>
<p class="activity_info">
Some random information about the picture
</p>
<p class="activity_pic">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="200"/>
</p>
</div>
phusion
03-10-2008, 09:00 PM
Ya, I think I got that part working if you look at the above container in the code posted... but if you look at the sample attachment. The 'pic tag' box doesn't drop all the way to the bottom and the 'middle' box doesn't drop all the way to the bottom either, which you can see by the border that only go down about half way.

Thanks.
boogyman
03-11-2008, 01:18 PM
so you want the content inside of the element to be aligned vertically to the bottom of the tag?

because that is a totally different aspect, for that you would need to use a different property.



selector.class {
vertical-align: text-bottom;
}