almost liquid design: navbar extend

[¤| battousai |¤]

I was recently given the task of redoing our website with a new, more fresh looking design. It's a 3 column, fixed width, centered layout with a header and navbars on both sides and a that extend along with the content (middle) box, and have a minimum height of 100% of the window.

I have tried several aproaches, and made some progress in making the navbars extend, but not the way they should.

here is my css code:

html, body {
  height: 100%;
}

body {
  overflow: auto;
  font-family: Arial, Verdana, Sans-Serif;
  margin: 0;
  padding: 0;
}

#mainwrapper {
  width: 780px;
  margin: 0 auto;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

#banner {
  position: absolute;
  width: 780px;
  height: 116px;
}

#alpha {
  float: left;
  width: 138px;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #0071b7;
}

#beta {
  float: right;
  width: 170px;
  height: 100%;
  background-color: #afd451;
}

#content {
  float: left;
  width: 412px;
  min-height: 100%;
  text-align: left;
  padding: 0 15px;
}

#content_padding {
  margin-top: 121px;
}

#ghost {
  clear: both;
}

if I change height for the mainwrapper into min-height, the navbars extend to accommodate the new height but this is only 100% of the window.

I understand that in order for the child to extend, the parent needs to be given a height as well, but in this case that would mean the mainwrapper doesn't extend together with the content box.

can anyone help my with this problem?

[Fungus1487]

i dont understand which id and class refer to which item, perhaps a link to your page would help ?

[¤| battousai |¤]

sorry,

the mainwrapper holds everything, the banner is what it says.
Alpha and Beta are the navbars (left and right) and content is the middle contect box.

ghost is a seperator that sits at the bottom of the 3 colums. The content_padding box emulates padding-top property because I couldn't add any padding-top to the content, otherwhise it would stretch longer than it would have to (atleast in firefox it does)

if you take the banner away, you will see that the 3 columns are aligned to the top of the mainwrapper and the banner is simply stacked over them.

[roryt]

It would be so much easier to help you if you gave us a link. Also, I dont think you can set a height with a percentage.

[¤| battousai |¤]

I had not given a link because I hadn't put it online yet, but I have now.

http://www.test.fietspoolen.be/new/newdesign_template.html

The red borders belong to the mainwrapper, and i have given the content a background color so how far it stretches.

Also I have changed height: 100% to min-height: 100% for the mainwrapper

[Fungus1487]

i see no red on the page ? i see a small green box in the upper left corner. and btw i dont think min-height works in IE or it could be that it works just in IE

[¤| battousai |¤]

For some reason the stylesheet containing box layout isn't applied in IE.

I mainly use firefox when designing, so it would be best to view the page in that one, but the idea is to also get it working in IE afterwards

[¤| battousai |¤]

I am slowly becomming aware of the limitations of css, and realizing that css can only do as much.

I have found a workaround for my problem and got all 3 columns to stretch equaly in height.

By applying the "faux column" technique I discovered while reading trought a book on css.
I believe it was "CSS: The Missing Manual" from O'Reilly.

Problem solved now, and I also believe that i would have never been able to find a way to get this result with correct css positioning (no workarounds or hacks).

But I have seen the same design multiple times on the web, do they all use the "faux column" technique or is there another way to do this with css or any other language?

[Fungus1487]

For some reason the stylesheet containing box layout isn't applied in IE.

I mainly use firefox when designing, so it would be best to view the page in that one, but the idea is to also get it working in IE afterwards

majority of people use I.E. wouldnt it make sense to get it to work in that first ? although theres no reason why you cant get something working across all browsers. it just takes TIME and EFFORT

[roryt]

NO NO NO....

Make it work in firefox first... that is vital!!!!

It is then pretty simple to make work in ie using internet explorer conditional css.

[¤| battousai |¤]

NO NO NO....

Make it work in firefox first... that is vital!!!!

It is then pretty simple to make work in ie using internet explorer conditional css.

battousai agrees