homepage Welcome to WebmasterWorld Guest from 174.129.163.183
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Content depending height in DIV's
The height of one DIV depends on the height of another DIV
newToCss




msg:1214075
 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




msg:1214076
 6:20 pm on Apr 15, 2003 (gmt 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.

Nick_W




msg:1214077
 6:20 pm on Apr 15, 2003 (gmt 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

felix




msg:1214078
 9:10 pm on Apr 15, 2003 (gmt 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved