CSS - Fluid Three Column Problems

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

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.

I need a combination of this:

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

and this:

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

I need the middle column to be a fixed width and the outer two to be fluid.

I also need to maintain the 100% with header and footer at top and bottom respectively.

Any ideas how to do this?

Thanks.

Hi all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look:

http://www.chcs-ut.com/support.php?section=technical

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.

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'm trying to renovate my existing site "deepwaterchurch dot com", and part of it involves making the box on the site able to expand as more content is added to the content area. My best attempt at my new code is at "deepwaterchurch dot com slash next". I have successfully made the top of the design, but I can't figure out how to repeat the border section on the lower left and right (the part that will actually expand) in response to more content being added, then finish the bottom off with the lower border. I have created the files "leftedgelow.png", "rightedgelow.png", and "bottomedge.png" to use.

Here's the code I have so far:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>LAYOUT</title>
</head>
<body style="margin:0px 80px 0px 80px; color:#FFFFFF; background-image:url(images/water.jpg);">

<div id="container" style="width:956px; margin:0px auto -1px auto;">
<div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div>
<div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div>
<div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div>
<div id="content" style="background:#000000; float: left; width: 797px; height:800px;">CONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br /></div>
</div>
</div>
</body>
</html>

I'd love some advice, as I'm very much a hobbyist at this.

P.S. I know it's dirty to have inline CSS code, but it's much simpler at this stage to tweak. Thanks.

Robin

Link he rpisolution dot com/test/

Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues.

btw, i know the CSS is probably ugly. sorry about that.

thanks

Hi there,

I'm having lots of trouble trying to get a three column system on my website. Unfortunately, it is not on the internet yet, so all i can show you is a screenshot of the problem I am having.

The problem is that the column on the right hand side ("rightcol") is not high enough up. I have tried changing the values and repositing eerything but it goes everywhere else around the screen except the place where I want it!

As you can see from the CSS below, I have a wrapper which everything is contained within. I've tried using absolute positioning for this but it messes up wen the user resizes the browser.

Any help on this matter would be greatly appreciated.

I have taken out the (i think) unneccessary bits from the CSS code (like the link styles and content styles).

The HTML code looks like this (roughly):-

Code:

<div id="wrapper">
            <div id="banner"></div>
            <div id="leftcol"> 
                    links go here>
            </div>
            <div id="content">
                    blah blah blah
            </div>
            <div id="rightcol">
                    links go here
             </div>
             <div id="footer">
                    info goes here
             </div>
</div>

The CSS code is :-

Code:

#wrapper {
width: 770px;
background-color: #FFFFFF;
margin: 10px auto;
border: 1px solid: #000000;
text-align: left;
background-repeat: repeat-y;
}

#leftcol {
margin-top: 20px;
margin-left: 0px;
float: left;
width: 100px;
}

#content {
	background-color: #f5f5f5;
	padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
	margin-top: 10px; margin-right: 120px; margin-bottom: 10px; margin-left: 120px;
}

#rightcol {
margin-left: 630px;
margin-right: 10px;
margin-top: 0px;
width: 100px;
float: right;
background: #fff;
border: 1px solid #000;
}

#footer {
clear: both;
border-top: 1px solid #000000;
background-color: #336799;
color: #FFFFFF;
}

If you look at this in both IE and Mozilla/Firefox. On IE, notice how the 2nd column expands with the size of the image, but on Firefox it doesn't. I'm assuming firefox is the one thats correct, since IE is horrible with CSS. How would I go about doing this on Mozilla/Firefox browsers, so that it looks like it does on IE.

http://imgod.us/temp/test1/

Thanks for your time.

I am having some problems laying out a center-aligned container with 3 columns within it. I am sure the issue is with float, but I can't figure out how to get around it.

Actually, it does work, but only if the center column is longer than the other two columns. Otherwise, they wrap over the footer and extend outside the container.

Here is the CSS:
Code:

body {
		margin:0px 0px 10px 0px;
		background-image : url(image_name.gif);
		background-repeat:repeat-x;
	    text-align: center;
		}
	A 			{ color: #0066CC; text-decoration: none; font-weight:bold; } 
	A:link		{ color: #0066CC; text-decoration: none; } 
	A:visited	{ color: #0066CC; text-decoration: none; } 
	A:active	{ color: #3399ff;  } 
	A:hover		{ color: #3399ff;  }
	
	h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

	
	
#container {
    position: relative;
    margin: 0 auto;
    width: 622px;
    text-align: left;
    padding: 0px;
    border: 1px solid blue;
    }

#topnav {
    width: 622px;
    border: 1px solid black;
    }

#topnav_text {
    width: 622px;
	height: 92px;
    border: 1px solid black;
    }

	
#banner {
    width: 622px;
    border: 1px solid black;
	padding: 10 0 20 0;
    }
	
#footer {
    width: 622px;
    border-top: 1px solid silver;
	padding: 5 0 0 0;
    text-align: left;
    border: 1px solid black;
    }

#homepix {
    width: 235px;
    float: left;
    border: 1px solid green;
	padding: 0 5 0 5;
    }

#homejournal {
    margin-left: 248px;
    width: 215px;
    border: 1px solid red;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

#homeshows {
    float: right;
    width: 135px;
    border: 1px solid blue;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

.homeblog {
 		padding-left:15px;
 		padding-bottom:15px;
 		padding-right:15px;			
	}	

.homeblogbody {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:110%;
 		padding-left:5px;	
 		padding-right:5px;
	
	}


.homeblogbody a,
.homeblogbody a:link,
.homeblogbody a:visited,
.homeblogbody a:active,
.homeblogbody a:hover {
	font-weight: normal;
	text-decoration: underline;
}

}

.title	{ 
	font-family: verdana, arial; 
	font-size: small; 
	color: #003366; 
	text-transform: uppercase;
	font-weight:bold;	
	}			
	

.homeside {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:140%;
 		padding:2px;				
	}	

.side a {
	font-family:verdana, arial, sans-serif;
	font-size:x-small;
 		background:#FFF;
 		line-height:140%;
	}	

And here is a sample page:

Code:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

    <title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">


<!--#include virtual="/inc/functions.js" -->
  </head>

  <body>
    <div id="container">
	
	  <div id="topnav">
	  Navigation row goes up here
	  </div>
	
   
	  <div id="homepix">
		Generally an image goes here
      </div>
      <!-- end navcol -->

	  <div id="homeshows">
	  <div class="homeside">
        <strong>Upcoming Events Calendar</strong><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		<a href="/shows/">All events...</a>
		</div>
      </div>

      <div id="homejournal">
	  
	  <div class="homeblogbody">
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
	  </div>
	 
      </div>
      <!-- end content div -->

	  
      <div id="footer">
       <!--#include virtual="/inc/footer.inc" -->
      </div>


    </div>
    <!-- end container div -->
  </body>
</html>

Ok, I've created an XHTML/CSS site that looks fine in IE5+, Mozilla, FireFox and Netscape.

It almost works in Opera and on a Mac but it seems something slightly is going wrong.

The biggest problem is on the Mac, while the page looks fine, for some reason part of the left div goes over to the right, making the right div drop below it. I am sure it is just a CSS problem with the position or maybe float but if I could get someone to pin point the problem it would save me a lot of time.

Also on the Mac and in Opera, my columns have a gap at the very bottom of the page somehow, not quite sure why? They seem fine in the other browsers.

Also, just another quickie, in IE4.0 does it not support columns of floats? My site just expands the full length and ignores the float left rule, any ways to get round this?

The site URL is: www.gladiatorszone.co.uk/home/gladiators/

Thank you in advance to anyone that can help.

Hi guys,

I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to:

- in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column)
- in all other browsers it is not as long as the column on the right

The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window.

I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one.

Thanks for your help!

I feel like I am going backwards instead of forward.

I have made many changes to the layout trying to achieve what I want I had something close, but it was for a fixed height for the main page layout box and I needed something that will be a min height of 600px but will stretch if the content exceeds that.

So now after reading many tutorials on boxes, blocks, layouts, floats, etc. I am actually further from acheiving my goal (I think). I feel like I am losing my mind trying to figure it out

I have made each major box a different color for purposes only of trying to get the layout right and figuring out what each element is actually doing - so ignore all the funky colors.

I tried using a background image to create a faux side column (hot pink border) that I hoped would do the trick - however, I can't even get it to show up. I realize there has got to be something I am over looking - but what??? I tried using the css toolbar helper - the bg image is outlined but not showing up?? There are no broken images either ???

Click here to see the page

So here is my css: Code:

/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	min-height: 100%;
	background-color: #660099;
	padding-top: 10px;
	position: relative;
}

#sideColumn {
	float:left;
	width:155px;
	height: 100%;
	background: url(images/blue.gif) repeat-y;
	border: 1px solid #FF00FF;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}


.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
	margin-left: 175px;
	background-color: #99FF00;
}

Here is my xhtml: Code:

<body>

	<!--begin page -->
	
<div id="page"> 
      <!--begin header -->
    <div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" /> 
      <span class="tagline">world leaders in spirometry</span> </div>
    <!--end of header -->
    <!--begin topbar -->
    <div id="topbar"> 
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about_us/about_us.html">About Us</a></li>
        <li><a href="other_regions.html">Other Regions</a></li>
      </ul>
    </div>
    <!--end topbar -->
    <!--begin wrapper-->
    <div id="wrapper"> 
      <!--begin side column -->
      <div id="sideColumn"> <span class="category">Products</span> 
        <ul>
          <li><a href="products/spirometers.html">Spirometers</a></li>
          <li><a href="products/clinical_trials.html">Clinical Trials</a></li>
          <li><a href="products/asthma_copd.html">Asthma & COPD</a></li>
          <li><a href="products/smoking_cessation.html">Smoking Cessation</a></li>
          <li><a href="products/resuscitaion.html">Resuscitation</a></li>
        </ul>
        <span class="category">Resources</span> 
        <ul>
          <li><a href="resources/customer_support.html">Customer Support</a></li>
          <li><a href="resources/training_services.html">Training & Services</a></li>
          <li><a href="resources/exhibitions.html">Exhibitions</a></li>
          <li><a href="resources/newsletters.html">Newsletters</a></li>
          <li><a href="resources/downloads.html">Downloads</a></li>
          <li><a href="resources/useful_links.html">Useful Links</a></li>
          <li><a href="resources/industry_information.html">Industry Information</a></li>
          <li><a href="resources/industry_information.html">Sitemap</a></li>
        </ul>
      </div>
      <!--end of side column -->
      <!--begin main column -->
      <div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" --> 
        <div id="home"> 
          <div id="scroll"><span> 
           

          <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" /> 
          <span class="large">Welcome to Vitalograph</span> 
          <p class="home">Vitalgraph offers a wide range of spirometers along 
            with other asthma management equipment with over 40 years experience. 
            From simple hand-held units to sophisticated Windows based spirometry 
            systems, we have it all. Check out our full line of respiratory equipment 
            under the product category.</p>
          <p class="home"><a href="/about_us/about_us.html">more about us...</a></p>
        </div>
        <!-- InstanceEndEditable --> </div>
      <!--end of main column -->
    </div>
    <!--end of wrapper-->
  </div>
  <!--end of white border -->
</div>
  <!--end of page -->
  
</body>