Two floating divs - same height?

[SteveB_NI]

I have a div floated left (main content) and a div floated right (event bar) - both are position: relative; and must expand height-wise to fit the variable amount of text.

Is there anyway to force the divs to be a certain height (at minimum) but expand as required? - i.e. if text in 1 is longer, and requires extra height, the other div follows suit?


CSS

#content_area {
	position: relative;
	width: 530px;
	height: 100%;
	background-color: #C4E6FF;
	padding: 10px 10px 10px 10px;
	background-image: url(main_content01.jpg);
	background-repeat: repeat-y;
	float: left;
}

#rightbar {
	position: relative;
	padding: 25px 10px 10px 10px;
	background-image: url(right_event_bar01.jpg);
	background-repeat: no-repeat;
	background-color: #015697;
	width: 180px;
	float: right;
}

<div id="content_area">
<p align="left">
<img src="images\title_welcome01.jpg">
<br/>
<span class="subnav"> :: About PS :: School History :: </span>
</p>
<p class="main_body_text">
Welcome to ... Primary School.  .... serves the 
area of .....  It caters for 7-11 year old children, i.e. P.4 to P.7 
(Key stage 1 and 2), and enjoys particularly close links with .... 
Infants and its traditional post-primary schools.  
</p>
<p class="main_body_text">
The enrolment at present is 180 and staff 
consists of Principal, Vice-Principal, and 6 
other teachers.  There is also a part time 
special needs teacher.
</p>

</div>

<div id="rightbar">
<p class="events_bar_title"> <b> School Events </b> </p>
<span class="events_bar_date"> 1st September </span> <br/> <span class="events_text"> New school term </span>
<p>
<span class="events_bar_date"> 9th September </span> <br/> <span class="events_text"> Prize Giving </span>
</p>
<p>
<span class="events_bar_date"> 20th October </span> <br/> <span class="events_text"> Harvest Service </span>
</p>
<p>
<span class="events_bar_gallery"> [ View Events Gallery ] </span>
</p>
<p class="events_bar_title"> <b> Search Internet </b> </p>
</div>

Thanks for any help,

Steven

 

[LazyManc]

What you've basically described is a standard 2-column layout which is very common, try something like http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

or search for "2 column layout css" and you should find what you're after.

 

[Eriedor]

min-height: 400px;

 

[LazyManc]

min-height: 400px;

Unfortunately the min-height property is not supported by IE6 so that's currently 50% of web users who won't see what you expect them to see if you use it

 

[Tripnologist]

Faux columns would be the best idea.


Also, there is actually a really simple hack to force IE6 to emulate min-height.

#divName { height: auto; min-height: 400px;}
* html #divName { height: 400px;}

btw, IE6 is currently used by only 34% of web users - not 50%. Oh how I long for the day where we can stop worrying about it completely.

 

[LazyManc]

Faux columns would be the best idea.


Also, there is actually a really simple hack to force IE6 to emulate min-height.

#divName { height: auto; min-height: 400px;}
* html #divName { height: 400px;}

btw, IE6 is currently used by only 34% of web users - not 50%. Oh how I long for the day where we can stop worrying about it completely.

That depends on who's stats you look at. If you're talking w3schools for example then they're heavily biased away from IE because their main audience are web designers who know IE is crap. I'm going off the stats from my employers website which are probably a fairly good representation of the general public.

 

[SteveB_NI]

Thanks for the help everyone,

I had to use a solution suitable for IE6 as it's for a school website, and our managed service network (C2KNI / Northgate) within the majority of schools here, still uses IE6 at present.

Cheers

 

[JamesU2005]

I usualy use the following:

min-height: 900px;
height:auto !important;
height: 900px; /* IE6 */

Which allows the div to change height if the user changes text size via their Browser.

 

[Tripnologist]

I usualy use the following:

min-height: 900px;
height:auto !important;
height: 900px; /* IE6 */

Which allows the div to change height if the user changes text size via their Browser.

The correct way of doing that would be to use the * html hack, or an IE6 stylesheet to give IE6 the set height rather than relying on !important to make other browsers use height: auto. In other words, exactly what I posted a few posts up.