1

So the HTML is divided using divs obviously

...
<div id="left">
content
</div>
<div id="right">
content
</div>    
<div id="main">
content
</div>
...

I would like to create a layout using CSS that gives us three columns.

|      |            |      |
|      |            |      |
| left |    main    |right |
|      |            |      |
|      |            |      |

The trick is that I would like the main part to be centred and 60% of width. Left and right to be 20% width.

There will be no images just plain text.

  • I just found a way to do this quite simply by using margin:auto for main and left:0 for left div and right:0 for right div. Also specified widths in %. – Tomasz Apr 17 '11 at 18:34
1

There are lots of tutorials out there fore creating three column layouts, either fixed widths or flexible, fluid columns like you've asked for.

This is a good tutorial with a range of different layouts that should help you get started.

http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths

  • If you read their comments you can see they answered their own question – John Conde Apr 18 '11 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.