View Full Version : Creating 2 columns inside a column

04-03-2009, 12:10 PM
How would I go about doing this?

I have a news section on my site which I want to seperate into two columns, so I can put some new on the left hand side of the page and some on the right.

Any help would be greatly appreciated.

Here is my site: www.fiorenzato.co.uk

04-03-2009, 12:40 PM
You could have something like,

.newsleft {
float: left;
width: 400px;
.newsright {
padding-left: 410px;

And place them between your Centrecolumn div, like so:

<div class="Centrecolumn"><p><img src="assets/images/news.jpg" alt="Who Are We?" width="250" height="50" /></p>
<div class="newsleft"><p>TEST</p></div>
<div class="newsright"><p>TESTING</p></div>


By the way, your alt for your news image still reads "Who Are We?", I guess that is meant for another page? :)

P.S - I am still new to this, so forgive me if my solution isn't the most efficient.

EDIT: You might also want to fix these errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fiorenzato.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0


04-03-2009, 01:43 PM
Thanks for that mate. I'll fix the errors and try out your advice.

If anyone else has anymore input then i'd appreciate it also.

04-14-2009, 12:02 PM
I still haven't fixed this issue.

Do I have to create a CSS rule and apply it to the text I want on the right hand side of the page?

If so...I don't know what properties I must include to create the second column of text.

I want it to look something like the following:


04-14-2009, 01:01 PM
try something like this...


<style type="text/css">
div#container {width:830px; margin:auto; overflow:hidden; background-color:#99CCCC;}
div#colL {width:400px; float:left;}
div#colR {width:400px; float:right;}


<div id="container">

<div id="colL">left column content here</div>

<div id="colR">right column<br /> content here</div>


04-14-2009, 01:16 PM
Thanks for that mate. I've just tried it and so far it's looking good! I appreciate it mate.

Much love.