3 column without header / footer

HTML & CSS
1

hi, what is the simplest way to make three columns using div without header footer? Can I just float left and right for side columans, and then use padding on the center column? These three columns will go instead a table… here is a sample of exactly what I need:

http://www.apple.com/macbookpro/specs.html

2

Ah, I recognize the ALA hack version a mile away; CSS hack just to avoid using one extra div…

My question would be what width are all the columns? Are some fixed and some fluid, does the code for them need to go in a certain order?

If fixed width on all of them like on that ****** Apple page (not a fan of fixed width layouts), that’s easy; just float them all left and set your widths; you might need a negative right margin on the last one so IE doesn’t float drop.


<div class="column">Left</div>
<div class="column">Center</div>
<div class="column lastColumn">Right</div>



.column {
	float:left;
	width:256px; /* all three columns totals 768px width */
}

.lastColumn {
	margin-right:-10px; /* prevent IE perfect width float drop */
}

If two fixed and one fluid where the order doesn’t matter, that’s also simple.


<div id="firstSideBar">Left</div>
<div id="secondSideBar">Right</div>
<div id="content">Center</div>



#firstSideBar { 
	float:left;
	width:200px;
}

#secondSideBar {
	float:right;
	width:200px;
}

#content {
	margin:0 200px;
}

If two fixed and one fluid in a ‘content first’ (aka center column first in the code) like the CSS you posted, I do it thus:


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

<div id="firstSideBar">Left</div>
<div id="secondSideBar">Right</div>



#contentWrapper {
	float:left;
	width:100&#37;;
}

#content {
	margin:0 200px;
}

#firstSideBar,
#secondSideBar {
	position:relative;
	float:left;
	width:200px;
	
#firstSideBar {
	margin-right:-200px;
	left:-100%;
}

#secondSideBar {
	margin-left:-200px;
}

That covers the most important techniques for doing it – there are literally hundreds of others, but these are the simple ones.

3

I have this code, but I need to specify the width of the center column instead of 100%(I tried changing it to 260px, but it messed up the whole thing for some reason) and I need spacing in between the three columns, can someone help tweak this code to do that?!?


<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>

</div>

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}
4

You could pad the center div, or you could increase it’s margins.

The ALA method (similar to my last one posted) is more illusion in terms of column placement than fact; if you decreased that margin narrower than the columns you will notice the content actually goes UNDER the columns at the side.

The way it works is that the negative margin equal to it’s width makes those sidebars have zero width for calculating flow; this lets them ride up next to/over the 100% width float before them.

Though I think the ALA version may break down if you do that, I’m not 100% sure. Removing that extra div (which my last example uses) for a bunch of browser specific hacks is wrought with possible issues.

5

:slight_smile: That first example is super simple and works, however, as i mentioned in my other comment, how can I get spacing in between the three divs, should I just put left/right padding on the center div?