CSS - 3-column Fluid-fixed-fluid Problem

At the moment I have a css layout nearly done.
It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div.

The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven.
A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that.

Layout CSS code
Code:

#body {
 position:relative;
 margin:0 auto;
 width:94%;
 min-width:50em;
 max-width:70em;
 border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
 height: 185px;
 background-color:#ffffff;
 background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {

 background: #ffffff url(../images/design/background_3.gif) repeat-y left;

 border-top:none;
 border-bottom:none;
}
#wrapper {

 background: url(../images/design/background_2.gif) repeat-y right;
}

#container {
 width: 100%;
 float: left;
 margin-right: -200px;
 background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
 margin-right: 200px;
 /*background: url(../images/design/background_3.gif) repeat-y left;*/

}
#main {
/*border:1px solid #000000;*/
 margin-left: 150px;
/*  background-color:#bbbbbb;*/
}
#left {
 position: absolute;
 top:189px;
 width: 140px;
/* height: 100%;*/
 float: left;
 text-align: left;
/* border-left: 2px solid #bbbbbb;*/
 font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
 width: 200px;
 float: right;
  clear:right;
}
#footer {
/* border: 1px solid #000000;*/
 background: #304773;
 height: 30px;

}

.last {
 margin-bottom: 0;
}
.clearing {
 height: 0;
 clear: both;
}

Div structu
Code:

  <div id="body">
    <div id="header"><h1>Welkom bij Overeem de Haas</h1>
    </div>
    <div id="outer_wrapper">

      <div id="wrapper">
        <div id="container">
          <div id="content">
          
            <div id="main">
            </div>

            <div id="left">
                 <? include ("../include/navigatie.inc"); ?>
            </div>

            
          </div>
        </div>
        <div id="sidebar">
            <? include ("../include/uitloggen.inc");?>
            <? include ("../include/winkelmand.inc"); ?>
        </div>
        <div class="clearing">&nbsp;</div>
      </div>

    </div>

    <div id="footer"><p class="content"></p></div>
  </div>

navigatie.inc code
Code:

    <div id="navigatie">
            <ul>
               <li class="menu">Navigatie menu</li>
               <li><a href="index.php">Home pagina</a></li>
               <li><a href="#">Wat is Overeem?</a></li>
               <? ...
                 echo "<li><a href=\"#\">Contact</a></li>";
                 echo "</ul>";
                 echo "</div>";
               ?>

Live example

Can anyone (dev)shed some light on this?
I just can't get it to work without messing up the 3rd column.

Hello

I'm kinda new to css. (PHP programmer by day) and would like some help making something like this.

stevenbarre dot com / sample.jpg

I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars.

The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over.

I've done some googleing but haven't been able to find much on 100% height designs.

Your help is much appreciated as well as links.

Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates.

I'm trying to convert a horrendous table layout into CSS.

What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo.

I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing.

This is my current code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
	
<style type="text/css">	
	body {margin: 0px; padding: 0; background-color:#ffffff;}		
	#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
	#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }		
</style>
	
</head>

<body>

<div id="header">
	<div style="width: 425px; float: left;">
		<img src="logo.jpg" width="220" height="66" alt="logo">	
	</div>
	<div style="float: right;">
		<p>This is annoying</p>	
	</div>
</div>
<div id="nav">
</div>

</body>
</html>

Hello,
I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again.
I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related:
1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones.
2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal).
3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored.

Here is a test html: http://www.bsuto.com/test.html
and here is the css: http://www.bsuto.com/fluid.css

Thanks!
-Brian

I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense?

Any help would be greatly appreciated, thanks

I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour.

I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas?

This is the technique I've been using:

Code:

<div id="header-fluid">
<div id="header-fixed">

<div id="header"></div>
<div id="nav"></div>

</div><!-- head-fixed -->
</div><!-- head-fluid -->

Code:

<div id="content-fluid">
<div id="content-fixed">

<div id="content"></div>

</div><!-- content-fixed -->
</div><!-- content-fluid -->

Code:

<div id="footer1-fluid">
<div id="footer1-fixed">

<div id="sponsors"></div>

</div><!-- footer1-fixed -->
</div><!-- footer1-fluid -->

Code:

<div id="footer2-fluid">
<div id="footer2-fixed">

<div id="copyright"></div>

</div><!-- footer2-fixed -->
</div><!-- footer2-fluid -->

Thanks for your time on this!!
Hanek

I need to create a layout that is 100% width. 2 columns. The right column is 300px and and left column (content) takes up the rest. I need content to be first in the code because of float clearing.

Thanks for any help!

I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions?

http://midnighttweaker.50megs.com/test.htm

Hi all,

I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big.

What happens in those cases is that the middle column tends to just write itself on top of the right column.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Three columns</title>
    <style type="text/css">
      body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
      .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
      .clearfix { display: block; }
      * html .clearfix { height: 1px; }
      .clearfix { display: block; }
      #base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
      #main_block { margin: auto; text-align: left; }
      #content { padding: 10px; padding-top: 2em; clear: both; }
      #container_1, #container_2 { margin: 0; padding: 0; }
      .three_column #middle_content_template { margin: 0 210px; }
      #left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
      #right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
      #left_content, #middle_content_template, #right_content_template { padding: 10px; }
    </style>
  </head>
  <body>  
    <div id="base">
      <div id="main_block">
        <div id="content">
          <div id="container_1">
            <div id="container_2" class="three_column">
              <div class="clearfix">
                <div id="left_content">
                  <p>Left box o' content.</p>
                </div>
                <div id="right_content_template">
                  <p>Right box o' content.</p>
                </div>
                <div id="middle_content_template">
                  <table>
                    <tr>       
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right.

Additionally, I'd like the gray box to expand with it. Is this possible?

Hi, noob here,

I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer.

My layout idea is fairly basic. Fixed width-fluid height.

One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin.

What I need to figure out is how to allow the skin's graphics, with its block element body to vertically expand or contract, depending upon the user's resolution.

I have considered using % values, but I don't know how to apply them to the skin's graphics properly.

jbonham

hi all, right have got a problem which has been bugging me for days now. i have 4 columns in a row (inside a wapper div)which all will have different content image, text other divs/classes etc. now one of these columns will be quite fluid as it will have different text on each page meaning it will be quite long on some pages not on others. the problem i am getting is in the good browsers firefox etc its ok in IE6+. the wapper does'nt seem to see the divs in the content meaning it does not get filled, meaning that the footer flys to the top and not where it should be, i dont have a live version but heres the code: mainly thanks Dan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#con {
width:940px;
height:400px;
background-color:#00FFFF;
}
#wapper {
width:940px;
background-color:#006666;
}
#box {
width:940px;
background-color:#000033;
height:40px;
}
#menu-pronuptia {
width:185px;
background-color:#6633CC;
float:left;
display:inline;
}
#menu-pronuptia1 {
width:185px;
background-color:#009900;
display:inline;
float:left;
}
#menu-pronuptia2 {
width:385px;
background-color:#0033CC;
display:inline;
float:left;
clear:inherit;
}
#menu-pronuptia3 {
width:185px;
background-color:#CCCC33;
display:inline;
float:left;
}
-->
</style>
</head>
<body>
<div id="wapper">
<div id="menu-pronuptia">
<p>test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="menu-pronuptia1">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="menu-pronuptia2">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="menu-pronuptia3">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<div id="box">
<p><br />
</div>
</body>
</html>

I am useing bon rouge's 3 columns 100%:

http://bonrouge.com/3c-hf-fluid.php

In IE, at some resolutions (1280x1024) the footer has a small 1pxish margin at the bottom.

Any idea how to fix this?

I am a total newbie to CSS + DIV.

I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header."

I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser.

Here is my CSS, so far for this portion:

#header {
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding: 10px;
background: url(images/CATScreenMiddle.png);
width: 100%;
height: 265px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 25px;


Thanks for any help, in advance.

I have problem whereby i want a container div with the width at 100% and a inside div that which is the same width but minus 10px on both sides.

How can you get the inside div to be of fluid width to the container div with the 10px either side.

Thanks.

Hi guys, need some help for my layout.

What I am trying to do is set a div to:

When screen width is <1024 x 768
width should be fluid

When screen width is >1024 x 768
width should stay at within 1024 (viz. 970) to avoid the long hard-to-read paragraphs.

Any ideas? Preferbably no javascript as I want it to change as the browser resizes without refreshing, like when the width is set to 100%.