Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Creating 2 columns inside a column

    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

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts
    You could have something like,

    Code:
    .newsleft {
    	float: left;
    	width: 400px;
    }
    .newsright {
    	padding-left: 410px;
    }
    And place them between your Centrecolumn div, like so:

    Code:
    <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>
    
    </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=ht...Inline&group=0

    Regards,
    Nick
    Last edited by nick1988; 04-03-2009 at 12:41 PM. Reason: Included validator link.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    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:

    http://www.cooperscoffee.com/news.html

  • #5
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    try something like this...

    css:
    Code:
    <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;}
    </style>
    body:
    Code:
    <div id="container">
    
    <div id="colL">left column content here</div>
    
    <div id="colR">right column<br /> content here</div>
    
    </div>

  • Users who have thanked many_tentacles for this post:

    grahamy84 (04-14-2009)

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Thanks for that mate. I've just tried it and so far it's looking good! I appreciate it mate.

    Much love.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •