Positioning

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 …:confused:

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 :slight_smile:

You know: 'a picture paints more then … ’ and all that :smiley:

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 :slight_smile:

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.