Simple css problem

[Peter]

Hi all

I'm a 100 confident programmer php wise but when it comes to designing pages I loathe it.

Any way I want to have a 3 column page such as:-

	<div id="wrapper">
<div id="head"><h1>petermcdonald.co.uk</h1></div>
<div id="content"><h1>Examples</h1>
<p>THIS IS WHERE THE CONTENT IS</p>
</div>
<div id="nav">
<ul>
<li><a href="#">nav1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div id="info">
<ul>
<li><a href="#">info1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
		</div>

So basically the columns are the content, nav and info id's. I would prefer the content id to be output first as it is in the example. How do I make it so that nav is on the left, info on the right and content in the middle.

I have done:-

#nav
{
	float: left;
	width: 25%;
}

#content
{
	float: right;
	width: 50%;
}

#info
{
	float: right;
	width: 25%;
}

Obviously not much done here, but anyway if I have 2 that are set as right then it seems to put the first 1 output as the far most right and the next right in this case info next to it.

It seems to be ordered by first come first served. What is the best solution? I presume it would be the use of a 2nd wrapper containing the info and content and order them within this new container?

Cheers In Advance

Peter

 

[stogid]

Swap your 'nav' and 'content' divs in the html and also make your '#content' CSS float: left;

Infact...if they all float left it should line up as 3 columns.

I assume you also closed your div tags for 'wrapper' and 'head'

 

[Peter]

Yes the divs are closed (copy and paster error here).

Regarding the reorder of divs. I thought I mentioned about it (but looking back obviously did not). I wish to output the content div first and for the style sheet to position them correctly (i am not too fussed about the order of the other 2 divs).

 

[stogid]

I would prefer the content id to be output first as it is in the example. How do I make it so that nav is on the left, info on the right and content in the middle.

Ok, you are saying you want the content div first, then you are saying you want it in the middle (second)?

If you want the <nav><content><info> layout then you need to swap the DIVS as I mentioned above.

If you want the <content><nav><info> layout then you need to set the content to float:left;

The default is for relative positioning so the layout will just follow what you tell it using the floats etc.

Hope that helps

 

[Peter]

no sorry you have misunderstood me slightly. I am developing a site and I want in the source of the HTML file for them to be in the following order:-

<content><nav><info> (nav and info can be the other way round BUT content must be first)

But when someone views the page I wish for them to see the content in the following order:-

<nav><content><info>

The following would be pseudo code for the above HTML (although I know it is invalid)

#nav
{
	float: left;
	width: 25%;
}

#content
{
	float: center;
	width: 50%;
}

#info
{
	float: right;
	width: 25%;
}

 

[stogid]

Right, is this for SEO purposes? As the logicial way would be to code it as you wanted it displayed

try this link;

http://bluerobot.com/web/layouts/layout3.html

 

[Peter]

ahh yes thats the sort of thing i am looking for, will have a look through the css now cheers.

And to answer your question yes SEO is a part of the reason it is the way I want it.

 

[Kate]

Maybe this can help: http://www.devarticles.com/c/a/Web-Style-Sheets/Matching-Web-Page-Columns-with-CSS/