As i understood the OP, he wanted them side by side like in almost touching. In his example the floats are on the same line but not side by side …
Nice explanation btw
Yeah I couldn’t tell what that was supposed to be… if there were to be two floats hugging each other in a box and they are only 25% wide, then your answer of just floating them in the same direction is best. It might depend on what the reading material was going for?
That’s why i found this tut handy … just for the visual part 
You know: 'a picture paints more then … ’ and all that 
Hi All
I am trying to create the following three columm page but I am struggling with the positioning aspects of my CSS. The required result is to have a header at the top of my page, on the left hand side a navigation with a background colour of grey and the title of the nav to be in a different grey so that it contrasts.
The middle section can be an area which will be populated by text or image depending on the page.
The right hand side I would like to display two boxes one to display the Shopping cart and the other box to house an adrotator displaying brand images or latest news text.
I have included my code of where I am at the moment.
<Code>
/* CSS Document */
body
{
background-image:url(‘images/grass-natural.jpg’);
background-repeat:repeat-x;
font-family: Verdana, Sans-Serif;
font-size: 14px;
height: 100%;
margin-bottom: 1px;
}
#container {
position:relative;
width:960px;
background-image:url('images/grass-natural.jpg');
text-align:left;
}
/* header */
#header {
background-image:url ('images/TitleWide.jpg');
height:200px;
width:1000px;
background-repeat:no-repeat;
background-position:center;
}
#header H1 {
margin:0;
padding: 10px 0;
}
#sidebar1 {
position: absolute;
top: 60px;
left: 0;
width:200px;
background:#999;
padding: 15px 10px 15px 20px;
}
#sidebar2 {
position:absolute;
#sidebar1 {
position: absolute;
top: 60px;
left: 0;
width:200px;
background:#999;
padding: 15px 10px 15px 20px;
}
#maincontainer {
margin: 0 200px;
padding: 0 10px;
}
#footer {
margin: 0;
padding: 10px 0;
background:#000;
}
H1, H2, H3, H4
{
font-family: Times New Roman, Serif;
font-weight: bold;
font-style: italic;
}
a
{
color: #990000;
}
.content
{
position:absolute;
width:800px;
margin:auto;
border:solid #000000;
background-color:#FFFFFF;
padding:10px;
color:#000000;
}
content p {
position:absolute;
width:600px;
}
.tabstrip
{
border-top:solid 1px #000000;
border-bottom:solid 1px #000000;
}
.leftcolumn
{
float:left;
padding:0px;
border-right:solid 1px #ffffff;
width: 200px;
margin: 0px;
display:block;
background-color:#666666;
}
.navigation
{
float:left;
padding:0px;
background-color:#666666;
display:block;
width:200px;
}
.navigation:ul
{
float:left;
background-color:text-align:center;
text-align:center;
color:#FFFFFF;
display:block;
width:200px;
}
.p
{
text-align:center;
font-family:Verdana, Arial;
font-size:14px;
font-style:normal;
color:#000000;
}
.rightcolumn
{
float:left;
width:640px;
}
.clear
{
clear:both;
}
.grid
{
margin:0px auto;
}
.grid td, .grid th
{
padding:10px;
}
.grid th
{
font-family: arial, verdana;
font-weight: bold;
font-style: normal;
font-size: large;
text-align:center;
background-color:#FFFFFF;
}
.alternating
{
background-color:#000000;
}
.float
{
float: left;
}
.small
{
font-size: 10px;
}
.center
{
text-align:center;
}
.right
{
float: right;
}
.leftpadding
{
float: left;
padding: 5px 10px 5px 0px;
}
.rightpadding
{
float: right;
padding: 0px 0px 2px 5px;
}
img
{
border: solid 1px #660000;
}
.pageborder
{
border: solid 10px #cccccc;
}
.selectedrow
{
background-color: #ffffcc;
}
.login
{
background-color:C0C0C0;
Border: solid 1px #000000;
font-family: Verdana;
font-size: 0.7em;
width: 360px;
}
.password
{
background-color: #ffffcc;
Border: solid 1px #ffcc00;
font-family: Verdana;
font-size: 0.8em;
width: 360px;
text-align: center;
}
.loginbutton
{
background-color: #ffffff;
Border: solid 1px #CC9966;
font:Verdana;
font-size:0.8em;
Color: #990000;
}
.texttitlestyle
{
background-color: #ffffff;
font-family:Times New Roman;
font-style:Italic;
font-weight:bold;
font-size: 16px;
color: #660000;
}
.instructiontextstyle
{
color: Black;
}
.successtextstyle
{
color: #990000;
font-weight: bold;
}
.textboxstyle
{
font-size: 0.8em;
}
.register
{
background-color:C0C0C0;
Border: solid 1px #000000;
font-family: Verdana;
font-size: 0.7em;
width: 360px;
}
.sidebarbuttonstyle
{
color: #ffffff;
}
.sidebarstyle
{
background-color:Red;
font-size: 0.9em;
vertical-align: Top;
}
.headerstyle
{
background-color:Gray;
Border: solid 2px #FFFFFF;
font-weight:bold;
font-size: 0.9em;
Color: #333333;
text-align: Center;
}
.passwordhintstyle
{
font-style: italic;
Color: #888888;
}
.red
{
color:#ff0000;
}
Any help would be greatly appreciated.
Cheers
Paul
Instead of stealing this thread would you mind creating your own thread? :).
Also, post a link to the page in question if you can-that makes it easier for us to debug
Will do thanks Ryan
You mean the tut page? JS? dunno. What i meant is that it starts with all the divs at their default position. As you tab to relative, absolute… you see how the divs interact … to get a basic grab on positioning i’ve found it visually not so bad.