Development I require a little bit of CSS assistance

Hey,

I imagine that i have made a silly mistake but can someone let me know how to make two columns in css one 20% wide of the screen and one 80% wide of the screen. The 20% one is a Div ID'ed as Links and the 80% one ID'ed as content.

I just cannot gt them to line up side by side. Content always lines up below links but with the correct width of the screen.

Only problem is that all positioning must be relative and use Percentages for screen distance.

I have been through the layout resevoir and CSS Zen garden but i haven't come up with a solution.

I do appreciate everyones help and this is the last piece of the puzzle .

Thanks

 

Here is the CSS to make this happen:

Code:

#links {
float: left;
width: 20%;
}

In the HTML, you need to place #links before #content so that they will flow correctly. If you want them to be the other way around, use this CSS:

Code:

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

If you don't want the text to wrap around the floated div if it is longer, then add a margin to it:

Code:

#content {
margin: 0 0 0 20%;
}

I've whipped up an example page that shows you each of the above methods. Check out the source for HTML and CSS goodness.

 

Ah, i wasn't using the float part. Bit silly of me and it works a treat now.

Your assistance is much appreciated as the website is now almost done.