Web Analytics Made Easy -
StatCounter Creating 2 columns inside a column - CodingForum

Announcement

Collapse
No announcement yet.

Creating 2 columns inside a column

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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; Apr 3, 2009, 06:41 AM. Reason: Included validator link.

    Comment


    • #3
      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.

      Comment


      • #4
        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

        Comment


        • #5
          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>

          Comment


          • #6
            Thanks for that mate. I've just tried it and so far it's looking good! I appreciate it mate.

            Much love.

            Comment

            Working...
            X