column height 100%

@alexthecattaJun 08.2008

I want my two div to be high 100% as the window height.

I was reading ~~[URL=”http://www.webdeveloper.com/forum/showthread.php?t=181718&highlight=min-height”]~~this post[/URL] and now my footer is correctly at the bottom of the page, but the divs still don’t exapand.

This is ~~[URL=”http://www.cattaneoalessandro.com/proLoco/Copiadiproloco.html”]~~the page[/URL] and ~~[URL=”http://www.cattaneoalessandro.com/proLoco/css/base_2.css”]~~this is the css[/URL].

Please help…I’m reading a lot of posts about this, but still lost.
thanks

to post a comment

CSS

5 Comments(s) _↴

@CentauriJun 09.2008 — #One of the things I was trying to get across in that linked post is that you cannot reference anything to the height of the wrapper when the wrapper has a minimum height set (and therefore height is "auto") - any heights referenced to this will also become "auto". You simply cannot force divs to take available height, but you can make it [I][B]look[/B][/I] like that.

The easiest way to do this is with the faux column technique, where a repeated background graphic can give the impression of equal full-height columns (a suitable graphic is attached here). As the wrapper is the only element which will be the full height of the site, this is where the faux column needs to be applied. If the wrapper is given the site width, and centred with the auto side margins, then the .centerIE and .centerFirefox divs can be eliminated - they are not required. If the wrapper is at least as high as the screen, the default margins (and padding) needs to be removed from the body element, otherwise the wrapper plus margins will cause a scrollbar.

As the footer is after the wrapper, it will thus normally be below the bottom of the screen, and needs a negative top margin, equal to its total height, to pull it back into view. A relative position will also ensure it is on top. To prevent the possibilty of the footer obscuring content, and extra padding div of height equal to the footer can be inserted below the two floated columns, and a clear on this will ensure the wrapper surrounds all content.

As the faux column graphics will be the full height of the screen, the header and navigation must have solid backgrounds to obscure the column at the top. As the navigation has the transparent graphic background, the easiest way to ensure the columns are hidden is to include the navigation within the header div, and set the background of the header. When looking at this area, there are a number of unnecessary divs here - no divs are needed around each top graphic or the navigation <ul>, as the styles can be applied to the elements directly.

The left and right columns then do not need any background colour or border, and can be sized to provide proper spacing for text. The html changes can be :

[CODE]<div id="wrapper">
 <div class="header">
 <img src="img/castello.jpg" class="header_visual">
 <img src="img/logo_proloco_master.jpg" class="header_logo">
 <ul id="navigation_menu">
 .
 .
 . rest of site
 .
 .
 <div class="right">Place 2</div>
 
   <div id="footerpush"></div>
 </div>
 <div class="footer">[/CODE]

To prevent the post being too long, css next post.

[upl-file uuid=950aa3a2-ffeb-43b8-96d1-4b38a5602318 size=999B]wrap_back.png[/upl-file]

@CentauriJun 09.2008 — #The [I]changed[/I] css for this is :

[CODE]body {
 background-image:url(../img/background_thin.gif);
 background-repeat:repeat;
 margin: 0;
 padding: 0;
 }
 
 #wrapper {
 min-height:100%;
 width: 800px;
 background-image: url(../img/wrap_back.png);
 background-position: right top;
 background-repeat: repeat-y;
 margin: 0 auto;
 }
 * html #wrapper {
 height: 100%;
 }
 
 .left {
 float:left; /*Makes the div move to the left*/
 width:180px;
 padding: 2px 0 0 10px;
 }
 
 .right {
 float:right;
 width:580px;
 padding: 5px 10px 0 0;
 }
 
 .header {
 padding:10px 0 0;
 background-color: #FFFFFF;
 height: 262px;
 }
 
 .header_visual {
 float:left;
 }
 
 .header_logo{
 float:right;
 }
 
 .header_visual, .header_logo {
 border:1px solid #999999;
 background-color:#FFFFFF;
 padding: 5px;
 }
 
 #navigation_menu {
 white-space:nowrap;
 padding:0px;
 margin:-10px 0 0;
 list-style-type:none;
 float: left;
 clear: both;
 height: 93px;
 background-image: url(../img/sfondo_navigazione_quaderno.png);
 background-position: center top;
 width: 100%;
 position: relative;
 }
 
 #footerpush {
 height: 26px;
 clear: both;
 }
 
 .footer {
 height:25px;
 margin-top:-26px;
 border-top: 1px solid #999999;
 background-color: #FFFFFF;
 position: relative;
 }
 
 .footer p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:10px;
 color:#333300;
 vertical-align:top;
 margin: 0;
 }[/CODE]

First, the margins and any padding are removed from body, and #wrapper gets the site width and the faux column background on the right side. The * html hack is to allow the minimum height to work in IE6. .left and .right are floated left and right, and given appropriate sizes and padding to space content text properly. The .header gets top padding to space the site down from the top, a whaite background to cover the faux column, and a height equal to the two graphics (which are floated left and riight) plus navigation height (taking into account the negative margin for overlap). The #navigation_menu <ul> itself gets the background image, height, width, float and clear, and the negative top margin for the image overlap. A relative position here ensures the navigation background overlaps on top of the header. The margin of the footer paragraph is zeroed so that it does not affect the footer height, and the footer gets the negative top margin to pull it up, and relative position to ensure it is on top. The background colour on the footer also covers the lower part of the faux columns.

@alexthecattaauthorJun 15.2008 — #Centauri thanks for your help.

I'm trying to exploit at best your suggestions, but I think I do something wrong.

Attached you can find the HTML and the CSS. What do I do wrong?

Thanks.

[upl-file uuid=27f5353a-2319-4113-adc5-2900df9c598b size=3kB]proLoco.zip[/upl-file]

@mshalabiJun 15.2008 — #i face this problem since long time..

it makes headache really..

usually i use javascript to optimize the height of the divs..

the script can be done with one of the following:

1- use javascript in ur CSS file, e.g

[CODE]
 #shorterdiv {
 height: expression(body.document.getElementById("tallerdiv").clientHeight);
 }
 [/CODE]

(note this works only on IE 5.5+)

2- use normal javascript code

[CODE]
 var x = document.getElementById("tallerdiv").offsetHeight;
 document.getElementById("shorterdiv").style.height = parseInt(x) + 'px';
 [/CODE]

@CentauriJun 15.2008 — #You have inadvertantly removed this rule from your original css :

[CODE]html, body {
 height:100%;
 }
 [/CODE]

I had not included it above as it was not [I]changed[/I], but needs to be included to set the reference height for the wrapper.

Also in #CSS _↴

child div overflows the parent div IE is clearing float when it should't - FF is correct.a matter of semantics

Success!

Help @alexthecatta spread the word by sharing this article on Twitter...

Tweet This

column height 100%

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

column height 100%

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴