homepage Welcome to WebmasterWorld Guest from 54.225.57.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Set self-adjusting Div height
Gemini23




msg:4349452
 12:36 pm on Aug 9, 2011 (gmt 0)

Can anyone advise?

I have a 3-column website with left and right Divs each with un-ordered lists and a centre Div with content that varies in amount.

The left and right columns are 'fixed' heights and no problem.

The centre content varies in length and at times I want it to increase in height (which it does) BUT I would like the left and right columns to automatically increase in height when the middle one does. Also, I would like a minimum height for the centre Div.

ANy help greatly appreciated.

 

Paul_o_b




msg:4349480
 1:42 pm on Aug 9, 2011 (gmt 0)

Usually equalising columns are achieved most simply using the "faux column" approach where a background image on the main parent is used to provide the illusion of full height columns. (You will of course need floated columns so if your site is absolutely positioned then you will be out of luck as absolute elements are removed from the flow and will not cause the parent to grow.)

If you only wanted to support ie8+ (plus other modern browsers) then you could use the display:table and display:table-cell properties for the columns and they will exhibit the same behaviour as table-cells.

If you need to support ie6 and 7 then you would need to use the "faux column" approach (google "css faux columns") or one of the many work-a-rounds that exists such as negative margin floats, wide borders, absolute background overlays and other wild and wonderful techniques :)(google "3 equal columns with css"). Which one you use depends on the job in hand and what the exact requirements are.

Suffice to say that CSS does not do automatic equalising columns easily (apart from display:table-cell as already mentioned) and most other examples are pretty hacky. The best approach is to avoid the need for doing this in the first place. What's so bad about content high containers anyway :)

For a min-height for your middle column you can simply use min-height and if IE6 support is required you just give ie6 height in a separate rule as it always treats height as a minimum anyway.
e.g.
#middel{min-height:350px}
* html #middle{height:350px}/* ie6 and under only */

Gemini23




msg:4349483
 1:50 pm on Aug 9, 2011 (gmt 0)

Thanks Paul - I would also need Firefox as a minimum to support this... and hopefully across most IE browsers inc 7 to 9 - Does anyone use IE7 or 6?

Paul_o_b




msg:4349518
 3:22 pm on Aug 9, 2011 (gmt 0)

IE6 usage is quite low in the west but may be very high usage in the east of the world. It all depends on where you are and who you are targeting. Most people are giving IE6 limited lip service support and not the full blown bells and whistles layout that modern browsers can achieve.

In reality there are probably just as many individual IE6 users as there ever was but the percentage of total is probably only 5% instead of 90% ten years ago.

Without seeing your exact set up its hard to offer code but here is a basic equal column set up using absolute overlays to produce the full column effect.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {margin:0;padding:0;}
body {
background:#333;
padding:10px;
color:#000;
}
h1, h2, p {margin:0 0 .7em}
#wrapper p {padding:0 10px;}
h1, h2 {text-align:center;}
#wrapper {
margin:0 auto;
background:#fff;/* center column colour*/
text-align:left;
position:relative;
z-index:0;
min-width:800px;
max-width:1200px;
border:1px solid #000;
overflow:hidden;
zoom:1.0;
}
#header {
background:#ccc;
clear:both;
position:relative;
z-index:2;
border-bottom:1px solid #000;
padding:0 0 1px;
zoom:1.0;/* ie6 fix*/
}
#footer {
background:#ccc;
color:#000;
clear:both;
padding:1px 0;
position:relative;
z-index:2;
text-align:center;
border-top:1px solid #000;
zoom:1.0;/* ie6 fix*/
}
/*if we float the middle column we avoid the ie6 3 pixel jog and also keep columns in normal source order (left,middle right) but we need to use a negative margin offset to make it all fit.*/
#middle {
float:left;
width:100%;
margin-right:-400px;/* width of left and right columns */
overflow:hidden;
}
#content {
margin-right:400px;/* width of left and right columns */
overflow:hidden;
min-height:450px;
}
* html #content {height:450px}/* min height fix for ie6*/
#left {
width:200px;
position:relative;
float:left;
z-index:2;
}
#right {
width:200px;
position:relative;
float:right;
z-index:2;
}
/*The following 2 absolute columns that just hold the column colour and no content */
#l, #r {
width:199px;
height:100%;
position:absolute;
bottom:0;
left:0;
background:#eee;/* left column color*/
z-index:1;
clear:both;
border-right:1px solid #000;
}
#r {
right:0;
left:auto;
background:#fcf;/* right column color*/
border:none;
border-left:1px solid #000;
}
* html #l, * html #r {
height:999em;
bottom:-1px
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>3 column layout with equal columns </h1>
</div>
<div id="left">
<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : </p>
</div>
<div id="middle">
<div id="content">
<p>Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : Middle content goes here : </p>
</div>
</div>
<div id="right">
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
</div>
<div id="footer">
<p>footer</p>
</div>
<!-- l & r are the left and right column colours only - they hold no content -->
<div id="l"></div>
<div id="r"></div>
</div>
</body>
</html>


I still feel that if you can use the faux column approach it will save you using any extra elements and making the code more complicated than it needs to be.

Gemini23




msg:4349523
 3:26 pm on Aug 9, 2011 (gmt 0)

Brilliant, Thanks Paul - I will have a go at this today!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved