www.webdeveloper.com
Results 1 to 8 of 8

Thread: Div Positioning

  1. #1
    Join Date
    Apr 2005
    Posts
    2

    Question Div Positioning

    Hi All,

    Im having trouble with the alignment of div tags.

    Code below, im trying to get the rhs_content div to align to the top of the page but it aligning itself to the right hand side of the bottom of the last lhs_content div. Im looking to do this without nesting the all the other lhs_content divs within another div which i know will work.

    Any suggestions, or if this can be done?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>css</title>
    <style type="text/css">
    <!--

    #content {
    width:530px;
    vertical-align: top;
    text-align:left;
    }

    #rhs_content {
    border: 1px solid black;
    width: 120px;
    margin-left:403px;
    padding:0;
    vertical-align: top;
    }

    #lhs_content {
    float: left;
    border: 1px solid black;
    width:388px;
    margin:0 0 0 0; padding:0;
    vertical-align: top;
    }

    -->
    </style>
    </head>

    <body>
    <div id="content">
    <div id="lhs_content">Left Div 1</div>
    <div id="lhs_content">Left Div 2</div>
    <div id="lhs_content">Left Div 3</div>
    <div id="rhs_content" align="right">RHS Text</div>
    </div>
    </body>
    </html>

    Thanks in advance

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,330
    Add "clear: left;" to your lhs_content definition.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Apr 2005
    Posts
    2
    Perfect! Cheers NogDog, Much appreciated...

  4. #4
    Join Date
    Apr 2005
    Posts
    21
    Try this:

    <div id="content">
    <div id="lhs_content" align=left>Left Div 1</div>
    <div id="rhs_content" align="right">RHS Text</div>
    <div id="lhs_content">Left Div 2</div>
    <div id="lhs_content">Left Div 3</div>

    </div>

  5. #5
    Join Date
    Mar 2005
    Location
    Washington, USA
    Posts
    379
    Quote Originally Posted by 50000
    Try this:

    <div id="content">
    <div id="lhs_content" align=left>Left Div 1</div>
    <div id="rhs_content" align="right">RHS Text</div>
    <div id="lhs_content">Left Div 2</div>
    <div id="lhs_content">Left Div 3</div>

    </div>
    That was outdated so long ago.. :P Use CSS to position, not HTML. It is usually not valid if you align stuff with HTML.
    Jason Granger's Blog

    I'm an inactive member...

  6. #6
    Join Date
    Apr 2005
    Posts
    21
    How to align (not position) stuff with CSS?

  7. #7
    Join Date
    Mar 2005
    Location
    Washington, USA
    Posts
    379
    To make a div align to the left, add float: left; to the CSS defining that div. To align it to the right, just change float: left; to float: right;. To make something align to the center, add margin: auto;. I don't know if that answers your question, but whatever.
    (if you don't want your next div to be on the same line as the one with the float on it, put clear: both; in the CSS defining the next div after the floated one)
    Jason Granger's Blog

    I'm an inactive member...

  8. #8
    Join Date
    Apr 2005
    Posts
    21
    Thanks, that answered my question.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles