Welcome to WebmasterWorld Guest from 54.226.62.251

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)



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!

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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.

Nick_W

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

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



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

felix

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

10+ Year Member



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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month