|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 7th, 2008, 12:18 AM
|
||||
|
||||
|
Specifying a percentage height for a div
So I have read a bunch of different results from my google searches and none seem to do what I would like. I'm beginning to think that there isn't really a solution at this point in time.
Here is my setup: Code:
<div id='container'>
<div id='header'></div>
<div id='menuBar'></div>
<div id='main'>
<div id='content'></div>
</div>
<div id='footer'></div>
</div>
'header', 'menuBar', and 'footer' are all fixed height. 'main' MAY have a sub-menu div. When it does have this sub-menu, I would like for that sub-menu to be full height and 20% wide. Otherwise, I would like for 'content' to be as wide as possible. Currently I'm floating the sub-menu left and as a result the text in 'content' wraps around it after the bottom. In case my description makes no sense... Default Behavior:  Current Behavior:  Desired Behavior:  It's so pretty and colorful  I *could* create a second template for pages with a sub-menu, but I would prefer not to have to resort to that.
|
|
#2
May 7th, 2008, 03:13 AM
|
||||
|
||||
|
You can use the technique Faux colums.
Usually the divs don't have to have an equal height, just appear to be the same. http://www.alistapart.com/articles/fauxcolumns/
__________________
|
|
#3
May 7th, 2008, 10:29 AM
|
||||
|
||||
|
Faux columns is one of the techniques that I read about.
Unfortunately, it will only make the background color extend down but the div height will still remain short and the 'content' div will still have text wrapping around it. Faux Columns would work if I always had the sub-menu div in place, but this is not the case for me. If the sub-menu isn't present, I would like for the 'content' div to be centered within the 'main' div.
|
|
#4
May 7th, 2008, 11:03 AM
|
||||
|
||||
|
Just add a class for the different states.
Example: Code:
html:
<div id='main' class="wide">
or
<div id='main' class="narrow">
Then in css.
.narrow #content {
margin-left:20%;
backround:url(faux.png) repeat-y;
}
Wordpress does this in the default theme, you can see example of it here. With sidebar :http://themes.wordpress.net/testrun/ without:http://themes.wordpress.net/testrun/?p=9
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Specifying a percentage height for a div |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
