Two floating divs - same height?

Associate
Joined
24 Sep 2005
Posts
209
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
Code:
#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;
}

Code:
<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
 
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
 
Back
Top Bottom