Forum Moderators: not2easy
Is it possible to meet the following requirements without using a table? If so can someone point me to the method I need to use?
Layout
* Header
1. full page width
2. fluid height based on contents
3. has margins, padding, & borders (dimensioned by px)
4. has background color and image* 3 columns
1. fixed width sidebars with padding (width dimensioned by em, padding by px)
2. fluid width center content column
3. columns are only containers for content
4. columns have no background color or image
5. columns don’t need to look the same heightRequirements
* content before sidebars in source
* no hacks
* no bugs
my table layout
<!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 profile="http://gmpg.org/xfn/11">
<title>test theme</title><style type="text/css">
*{
margin:0px;
padding:0px;
}body {
background-color:#909090;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:80%;
}#container{
width:100%;
border-width:0px;
}#left{
width:17em;
padding:0 10px 0 10px;
vertical-align:top;
}#right{
width:17em;
padding:0 10px 0 10px;
vertical-align:top;
}#center{
vertical-align:top;
}/* header Tags */
/* -------------------------------------------------------------------------- */#header{
background-color:#143c73;
margin:10px;
padding:5px;
border:1px solid #000000;
}/* Widget Tags */
/* -------------------------------------------------------------------------- */div.widget_title{
background-color:#143c73;
padding:3px;
border:1px solid #000000;
color:#FFFFFF;
font-weight:bold;
font-size: 1.3em;
}div.widget_contents{
background-color:#FFFFFF;
margin-bottom:10px;
padding:3px;
border-color:#000000;
border-width:1px;
border-style:none solid solid solid;
}
</style></head>
<body><table id="container" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="3">
<div id="header">
<b>Header</b>
</div>
</td>
</tr>
<tr>
<td id="left"><div class="widget_title">Widget title</div>
<div class="widget_contents">
<p>this is some test text that i am making up as i type, to see how the wordpress widget will look when it is done.</p>
</div></td>
<td id="center">
<div class="widget_title">Widget title</div>
<div class="widget_contents">
<p>this is some test text that i am making up as i type, to see how the wordpress widget will look when it is done.</p>
</div></td>
<td id="right">
<div class="widget_title">Widget title</div>
<div class="widget_contents">
<p>this is some test text that i am making up as i type, to see how the wordpress widget will look when it is done.</p>
</div></td>
</tr>
</table></body>
</html>
What you are asking can be done, however, it seems you are also asking for someone here to write your code. I suggest searching either WebmasterWorld or the net for "3 column CSS layout" for the solution. If your solution has bugs, myself and other members here are more than willing to help.
Marshall
Let me clarify, I don’t want anyone to create the layout for me. I was hoping to find out if anyone knew of tutorials etc. that I could learn from. Everything I have found to date, involves some form of hack, such as special comments in the CSS file, or fixed positioning etc.
I believe the solution involves using wrappers, floating divs, relative positioning, & clearing. Unfortunately I can’t even get the following code to work.
In IE6, the blue div (left) overlays the green div (center), and the green div appears to ignore the margins of it’s parent (outer_container) at certain screen resolutions
IN FF2, the green div obeys the margins of it’s parent, but the blue div always drops down.
<!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 profile="http://gmpg.org/xfn/11">
<title>test theme</title><style type="text/css">
*{
margin:0;
padding:0;
}body {
background-color:#909090;
}#header{
background-color:#143c73;
margin:10px;
padding:5px;
}#outer_container{
margin:0 10px 0 10px;
position:relative;
}#center{
background-color:#00FF00;
float:right;
margin-left:17em;
}#left{
background-color:#0000FF;
float:left;
clear:right;
width:17em;
}</style>
</head>
<body><div id="header">header</div>
<div id="outer_container">
<div id="center">
A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC
A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC
A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC
A AB ABC A AB ABC A AB ABC
</div>
<div id="left">
A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC
A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC
A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC A AB ABC
A AB ABC A AB ABC A AB ABC
</div>
</div></body>
</html>
* {
margin: 0;
padding: 0;
}
as this eliminates all margins and padding from all elements, <body> <div> <h> <p>, etc., requiring you to declare them for each element as you go along.
Second, you should not put your HTML out of sequence such as having the center declared before the left.
Very simple layout, apply widths (n) as needed, but do note this, any container which you want to auto center in the page needs a width declaration. Also, when calculating widths, you have to include not only the declared width of the element, but also its margin, padding and border.
CSS
body {
margin: 0;
padding: 0;
}
#wrapper {
width: n;
height: n; /* optional */
margin: 0 auto; /* causes wrapper to center in page */
padding: 0;
text-align: left; /* an IE thing, trust me */
}
#header {
width: n;
height: n; /* optional */
padding: n; /* optional */
}
#inner_wrapper {
width: set to width of outer wrapper or simply 100%;
margin: 0;
padding: 0;
}
#left;
width: 18%
margin: 0;
float; left;
}
#center {
width: 58%
margin: 0;
float: left;
}
#right {
width: 18%;
margin: 0;
float: left; /* can float right if desired */
}
HTML
<div id="wrapper">
<div id="header"></div>
<div id="inner_wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>
You will have to play with the widths on the three floated elements depending on your margin and padding settings.
Marshall
Even with center content first in source it could be done with an absolute positioning, which I wouldn't recommend though.
