Results 1 to 6 of 6

Thread: aligning divs on same row help!!!

  1. #1
    Join Date
    Dec 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default aligning divs on same row help!!!

    how to get somthing like this
    Code:
    <table width="100%" border="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    with CSS.
    yeah i would like insert 3 things on top of my page flags on the left, links in the middle and styleswisher on the right. how will i get to insert all on the same row?
    instead they all appear on seperate rows.
    many thanks guys.

  2. #2
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    .floatleft
    {
    	float: left;
    	width: 20&#37;
    }
    
    .floatright
    {
    	float: right;
    	width: 20%
    }
    
    .center
    {
    	text-align: center;
    	position: absolute;
    	left: 20%;
    	width: 60%;
    }
    
    </style>
    </head>
    <body>
    
    <div class="floatleft">Stuff on the left</div>
    <div class="center">Stuff in the middle</div>
    <div class="floatright">Stuff on the right</div>
    
    </body>
    </html>
    Last edited by Blake; 03-01-2007 at 06:21 PM.
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

  3. #3
    Join Date
    Dec 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks every much blake

  4. #4
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    a more efficient way to do this is as such:

    <div style="float: left;">
    left content
    </div>

    <div style="float: left;">
    center content
    </div>

    <div style="float: left;">
    right conent
    </div>

    //if you want to clear to next line //

    <br style="clear: both;" />

    OR

    <ul>
    <li style="display: inline;">left content</li>
    <li style="display: inline;">center content</li>
    <li style="display: inline;">right content</li>
    </ul>

    hope that helps as well!

  5. #5
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    But you cant have block level element inside an inline element.

    and if the window isn't wide enough to accommodate the content then it will stack, so make sure to put it into a fixed width div.
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  6. #6
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the code works fine without explicit width set, the only time content will stack is if it's an inline element (which it isn't here) and the outset element isn't set explicitly

Bookmarks

Posting Permissions

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