473,322 Members | 1,401 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Set the height of a floating divs equal (height = maximum height of divs)

Hi,

I have the following html:
<div id="content">
<div id="leftpart">...</div>
<div id="rightpart">...</div>
</div>

leftpart en rightpart are in the css set to float left. The content of
leftpart and rightpart div is so that both divs have different height.
There are even multiple pages containing this div construction and on
each page each leftpart en rightpart div have a different height.
Sometimes leftpart is heigher, sometimes rightpart is heigher. I would
like to set the height of both divs to the maximum height of both. Is
this possible in css?

Veerle

Jul 31 '05 #1
6 10897
ve*********@hotmail.com wrote:
I have the following html:
<div id="content">
<div id="leftpart">...</div>
<div id="rightpart">...</div>
</div>

leftpart en rightpart are in the css set to float left. The content of
leftpart and rightpart div is so that both divs have different height.
There are even multiple pages containing this div construction and on
each page each leftpart en rightpart div have a different height.
Sometimes leftpart is heigher, sometimes rightpart is heigher. I would
like to set the height of both divs to the maximum height of both. Is
this possible in css?


Yes, but not supported by IE.

--
Spartanicus
Jul 31 '05 #2
And how do you do it then?

Aug 1 '05 #3
ve*********@hotmail.com wrote:
And how do you do it then?


How do you do what?

Quote a minimal amount of what you are replying to and put your reply
beneath it (interspersed). Google group's crappy web interface is no
excuse, others do manage to follow usenet conventions using GG, and the
choice of interface is yours, using a news client to access newsgroups
is the preferred way.

[Browsing up the thread to see what you are on about]

The answer is CSS tables, since you've not told us what you want to do I
can only guess, but it could look like this:
http://homepage.ntlworld.com/spartanicus/temp3.htm

Requires a proper browser, basically anything but IE.

--
Spartanicus
Aug 1 '05 #4
> since you've not told us what you want to do

Basically I have 2 divs displayed next to each other (by setting them
to float left in my css). I don't know the length of the content of
both divs, it can be anything depending on the content of the page. But
since both divs have a background color (showing the height of the div)
I want them to have equal heights (make the shortest one heigher) so
that the colored blocks have the same height. I would like a solution
in css that works in the most common used browser like IE, mozilla,
safari, ...
The answer is CSS tables, it could look like this:
http://homepage.ntlworld.com/spartanicus/temp3.htm
Requires a proper browser, basically anything but IE.


Looks good in mozilla, but as you mentioned it doesn't work in IE en
most of the visitors of my website use IE (i can see that in my
statistics). I need a solution in CSS that works in all of the most
common used browsers, especially IE. But thank you for trying to help!

Veerle

Aug 1 '05 #5
Els
ve*********@hotmail.com wrote:
since you've not told us what you want to do


Basically I have 2 divs displayed next to each other (by setting them
to float left in my css). I don't know the length of the content of
both divs, it can be anything depending on the content of the page. But
since both divs have a background color (showing the height of the div)
I want them to have equal heights (make the shortest one heigher) so
that the colored blocks have the same height. I would like a solution
in css that works in the most common used browser like IE, mozilla,
safari, ...
The answer is CSS tables, it could look like this:
http://homepage.ntlworld.com/spartanicus/temp3.htm
Requires a proper browser, basically anything but IE.


Looks good in mozilla, but as you mentioned it doesn't work in IE en
most of the visitors of my website use IE (i can see that in my
statistics). I need a solution in CSS that works in all of the most
common used browsers, especially IE. But thank you for trying to help!


What you want basically is impossible (because of IE, like Spartanicus
said), but you can fake it.
Here's an example for 3 columns, but you shouldn't have a problem
applying it to your own layout:
http://www.pixy.cz/blogg/clanky/css-3col-layout/

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Madness - Shadow Or Fear
Aug 1 '05 #6
Els schreef:
What you want basically is impossible (because of IE, like Spartanicus
said), but you can fake it.
Here's an example for 3 columns, but you shouldn't have a problem
applying it to your own layout:
http://www.pixy.cz/blogg/clanky/css-3col-layout/


I tried it on my own div constuction and it works great! The trick is
basicly to do the background coloring on outer divs using an image that
is aligned left or right. This gives the impression that both divs have
equals lengths because the background colorings have equal lengths.

Thanks a lot for this tip!

Aug 2 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Linda Antonsson | last post by:
Hi, I am trying to put together a CSS-based layout consisting of a header, a sidebar and a main content area. Page: http://www.westeros.org/ASoWS/ CSS:...
12
by: Kepler | last post by:
How do you get the height of the client browser in IE? Both document.body.clientHeight and document.body.offsetHeight return the height of the document. If the page is long and there's a vertical...
1
by: Andy Jeffries | last post by:
Hi all, I want to have two elements have an equal height, with that height being the larger of the two (with dynamic content). In one case they are just side by side so I want them to look even...
12
by: meltedown | last post by:
I would like the floating divs to float and then the header to come after them , on the left. That's what I thought clearing the floats was for, but in this example, the header is to the right of...
4
by: Harris Kosmidhs | last post by:
Consider the following HTML: <div class="links"> <img src="linkimages/logo.gif"> <h2>title</h2> <span><a target="_blank" href="http://">http://</a></span> <p>description of link</p> </div> ...
18
by: zzpat | last post by:
I've come to the conclusion that float was never made for designing a page, but is there a good way to float three columns with the following characteristics? leftColumn 20% rightColumn 20%...
8
by: Harris Kosmidhs | last post by:
I have my whole page in a <tablejust to center it. Now I changed it and used a div instead: #wrapper { width:900px; margin:0 auto 0 auto; border-left:1px solid; border-right:1px solid;...
0
by: Nik Coughlin | last post by:
Something that I've been trying to do for a long time is a 3 column layout where all three columns have equal height, and have rounded corners implemented using PNGs with alpha. One of my early...
2
dlite922
by: dlite922 | last post by:
This might be a javascript problem, but I want to see if there's any way in CSS to do it first. I have two floating divs, one wide on the left contains the "content" of the page, the second...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.