Welcome to WebmasterWorld Guest from 54.159.19.75

Forum Moderators: not2easy

Message Too Old, No Replies

Content depending height in DIV's

The height of one DIV depends on the height of another DIV

     

newToCss

5:25 pm on Apr 15, 2003 (gmt 0)

Inactive Member
Account Expired

 
 


Hi all,

I've just recently got involved with XHTML and CSS and I have a question. I could not find the answer anywhere in this topic.

I have a page with a 3-column layout (quite common :) and they are made up of DIV's. The middle column contains content from a database. The length of this content is not known on forehand, so I cannot set the height of this DIV. All 3 DIV's have repeating background images and the columns don't have a margin between eachother so the images touch eachother.

Now my question; How do I make sure that the 2 outer columns automatically adjust in height based on the content in the center column? So, the middle column grows and shrinks based on the amount of text and the 2 outer columns should be of the same height:


Wrong:
---------------
....hi,........
....this.......
....is.........
---.content ---
.....blah........
.....blah........
....---------....


Good:
---------------
....hi,........
....this.......
....is.........
....content....
....blah.......
....blah.......
---------------

I this hope is possible and someone knows how to do this!

Thanx in advance!

Cheers!

6:20 pm on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


That's always a tough one and I usually end up oversizing the divs to allow for the largest content page. If a page is waaaay too large, I'll try to split it up.

Sorry to not have a good answer. If someone does, I'd like to hear it too.

6:20 pm on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Hi, Welcome to WebmasterWorld [webmasterworld.com]


How do I make sure that the 2 outer columns automatically adjust in height based on the content in the center column?

Use a table ;)

Seriously, this issue comes up with a fair amount of regularity and I've yet to see a solution that works cross browser.

There are a whole bunch of ways to do it theoretically but that won't help you. :(

So, either go the messy JS route, live with it or, use a table...

Sorry I couldn't bring better news, who knows, maybe someone can find a better solution than the ones I've seen?

Nick

9:10 pm on Apr 15, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 6, 2003
posts:37
votes: 0


Here's a method that should have good browser support. I can't check it right now, but it works in ie5.0.

Here's the CSS

/*needed if there is content above all this. */
#container {
position:absolute;
width:100%;
height:100%;
margin:0px;
overflow:auto;
}

/* left div */
#ldiv {
background-color:red;
position:absolute;
left:0%;
width:20%;
margin:0px;
height:100%;
overflow:hidden;
}

/* right div */
#rdiv {
background-color:green;
position:absolute;
left:80%;
width:20%;
height:100%;
overflow:hidden;
}

/* center div */
#cdiv {
background-color:yellow;
position:relative;
left:20%;
width:60%;
}

/* bottom div */
#bdiv {
background-color:purple;
position:relative;
width:100%;
height:100%;
overflow:hidden;
}

Declare the divs in the above order. The relative positioning of the center and bottom divs puts the bottom right below the center so it covers whatever part of the left and right divs would otherwise be visible below.

[edit]Oops. It only works if the content height is less than the page height.[/edit]