Div with 3 columns

richcranney · 02-25-2009, 11:59 AM

Hello,

I'm just re-doing my old webpage layout from Tables into Divs and wondered if anyone could help.

I have the following which in IE aligns the 3 Divs side by side. One main in the centre and one sidebar on each side. Perfect!

I have two problems....

1. When adding more detail into the Divs they don't seem to be top aligned, they sink to the bottom.
2. Can't get this to work in FireFox.

I'd like to keep it to a similar layout and not use floats if possible, but I guess if I knew what I was doing then I wouldn't be asking for help!!!

Many thanks

Code:

<html>

<head>

<style type="text/css">

body {
  color: black;
  background: white;
}

.BodyContainer {
  width: 900px;
  background-color: red;
}

.LeftContainer {
  width: 150px;
  display: inline;

  background-color: lightblue;
}

.MiddleContainer {
  width: 550px;
  display: inline;
  background-color: lightgreen;
}


.RightContainer {
  width: 200px;
  display: inline;
  background-color: tan;
}

.LeftContent {
  color: red;
}

.MiddleContent {
  color: orange;
}

.RightContent {
  color: white;
}

</style>

</head>



<body>

<div class="BodyContainer">
  <div class="LeftContainer">
    <div class="LeftContent">
      Text here<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
  </div>
  <div class="MiddleContainer">
    <div class="MiddleContent">
      Middle<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
  </div>
  <div class="RightContainer">
    <div class="RightContent">
      Right<br /><br /><br /><br /><br /><br /><br /><br />
    </div>
  </div>
</div>

</body>

</html>

BoldUlysses · 02-25-2009, 01:26 PM

Hi Rich,

Welcome to CF! What you have is a good start. A few suggestions:

1. Don't test with IE. IE is not standards-compliant when it comes to rendering pages, so what you see with IE isn't a correct representation of your code, even if it looks right. Around here we say "Code it for Firefox, tweak (or hack) it for IE."
2. The first step toward cross-browser compatibility is a DOCTYPE. It tells the browser which "rules" your page is playing by, and the browser renders the page accordingly. If the browser doesn't know your rules, it's going to render the page by its rules, which vary more from browser to browser.

That said, have a go with this:

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>Page Title Goes Here</title>
	
	<style type="text/css">	
	
		body {
		  color: black;
		  background: white;
		}
		
		.BodyContainer {
		  width: 900px;
		  background-color: red;
		  overflow:auto;
		}
		
		.LeftContainer {
		  width: 150px;
		  float:left;
		  background-color: lightblue;
		}
		
		.MiddleContainer {
		  width: 550px;
		  float:left;
		  background-color: lightgreen;
		}
		
		
		.RightContainer {
		  width: 200px;
		  float:left;
		  background-color: tan;
		}
		
		.LeftContent {
		  color: red;
		}
		
		.MiddleContent {
		  color: orange;
		}
		
		.RightContent {
		  color: white;
		}	

	</style>
	
</head>

<body>
	
<div class="BodyContainer">
  <div class="LeftContainer">
    <p class="LeftContent">
      Text here
    </p>
  </div>
  <div class="MiddleContainer">
    <p class="MiddleContent">
      Middle
    </p>
  </div>
  <div class="RightContainer">
    <p class="RightContent">
      Right
    </p>
  </div>
</div>

</body>
</html>

Notice a few things:

1. Replaced some extraneous divs with <p>s in order to make the code more semantic and avoid divitis. Removed your line breaks too. If you want to add dummy content use the lorem ipsum generator.
2. Your containers are floated left now instead of being set to display:inline. That's not a proper use of that declaration.
3. overflow:auto has been added to .BodyContainer in order to clear your floats.

richcranney · 02-25-2009, 02:48 PM

Woah, quite a few changes, but all look good and its displaying how I want now, thanks for the links too, good examples.

Many thanks for your help, I can now drift away from tables and have a stab at this.

richcranney · 03-03-2009, 03:13 PM

Hi msuffern

Thanks for the help before, not sure if you can help with this too....

I've been playing with the piece you helped with earlier and I thought I would add a header which spans over the middle DIV and the Right DIV, but for some reason, the width is not playing ball.

I have the body container which is 900px, this should not be more and not be less.

The Left is a 20% of this, the middle 60% and the right 20%. So in theory the Header which goes over the middle and right should be 80%. The problem being in Firefox it is the same width as the middle.

My question is, should it be 100% width for the header or 80%?

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>Page Title Goes Here</title>
	
<style type="text/css">	

.BodyContainer {
  background-color: red;
  width: 900px;	
  overflow:auto;
  font-family: Tahoma;
  font-size: 10pt;
}
		
.LeftContainer {
  width: 20%;
  float:left;
  background-color: lightblue;
}

.MiddleHeaderContainer {
  width: 80%;
  background-color: purple;
}

.MiddleContainer {
  width: 60%;
  float:left;
  background-color: lightgreen;
}

.RightContainer {
  width: 20%;
  float:left;
  background-color: tan;
}

.LeftTopHeader {
  color: brown;	
  background:url(bg_corner_topright.gif) no-repeat;
  background-position:right 0px;
}

.LeftExtraHeader {
  color: yellow;
}

.LeftContent {
  color: red;
  padding: 5px 5px 5px 5px;
}

.MiddleHeaderContent {
  color: white;
  padding: 5px 5px 5px 5px;
}

.MiddleContent {
  color: orange;
  padding: 5px 5px 5px 5px;
}

.RightContent {
  color: white;
  padding: 5px 5px 5px 5px;
}	

</style>
	
</head>

<body>
	
<div class="BodyContainer">


  <div class="LeftContainer">
    <div class="LeftTopHeader">
      First
    </div>
    <div class="LeftContent">
      Text here under the first menu header which will have rounded corners
    </div>
    <div class="LeftExtraHeader">
      Second
    </div>
    <div class="LeftContent">
      More text under the second menu header
    </div>
    <div class="LeftExtraHeader">
      Third
    </div>
    <div class="LeftContent">
      And so on and so on....
    </div>
  </div>


  <div class="MiddleHeaderContainer">
    <div class="MiddleHeaderContent">
      Header here
    </div>
  </div>


  <div class="MiddleContainer">
    <div class="MiddleContent">
      Middle
    </div>
  </div>


  <div class="RightContainer">
    <div class="RightContent">
      Right
    </div>
  </div>
</div>

</body>
</html>

abduraooft · 03-03-2009, 03:22 PM

Hi richcranney,
Take a look at http://bonrouge.com/3c-hf-fixed.php?nc. I believe, you can easily achieve your goal by just arranging it's markup like

Code:

<div id="wrap"> 
<div id="inner-wrap">
<div id="left">left</div>
<div id="main">
    <div id="header">
       <h1>Three columns - fixed width</h1>
    </div>
   <div id="right">right</div>
   <div id="content">content  </div>
</div>
</div>
<div id="footer">
<p>This is a footer</p>
</div>
</div>

(You may see the details of the layout at http://bonrouge.com/3c-hf-fixed.php)

Excavator · 03-03-2009, 05:57 PM

Hello richcranney,
If you remove the background color from the floated .LeftContainer you can see the rest of your header.
Like this -

Code:

	
.LeftContainer {
  width: 20%;
  float:left;
  /*background-color: lightblue;*/
}

.MiddleHeaderContainer {
  width: 80%;
  background-color: purple;
}

.MiddleHeadContainer is sized 80% of it's containing div, .BodyContainer.

Let it take all the room available like this -

Code:

.LeftContainer {
  width: 20%;
  float:left;
  background-color: lightblue;
}

.MiddleHeaderContainer {
  /*width: 80%;*/
  background-color: purple;
}

...