SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs Not Aligning

    hey all, I'm trying to put a page together with divs but my right div doesn't align properly and starts after the left div. I've tried all the 'Clear' options but nothing seems to work.

    this is the code
    Code:
    <!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>Home Page</title>
    <style type="text/css">
    <!--
    body {
        background-color: #0a1f1f;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
    }
    #headerDiv {
        margin-top: 45px;
        margin-left: 35px;
    }
    .titleThe {
        font-family: "Century Gothic";
        font-size: 24px;
        font-weight: bold;
        font-smooth: always;
        text-transform: lowercase;
        color: #e65324;
    }
    
    #leftDiv {
        clear: none;
        float: left;
        margin-left: 42px;
        margin-top: 60px;
        border: none;
        width: 55%;
    }
    #rightDiv {
        float: right;
        margin-right: 42px;
        margin-top: 58px;
        width: 40%;
        clear: none;
    }
    .strpln {
        font-family: "Century Gothic";
        font-size: 18px;
        font-weight: bold;
        color: #666666;
        text-transform: lowercase;
    }
    #infoDiv {
        border: 1px solid #E65324;
        height: 350px;
        width: 260px;
        font-family: "Century Gothic";
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 6px;
        padding: 3px;
        clear: both;
        float: left;
    }
    #leftbottomDiv {
        clear: both;
        float: left;
        margin-top: 55px;
    }
    #rightbottomDiv {
        float: left;
        clear: right;
        margin-top: 57px;
        margin-left: 145px;
    }
    .msgBox {
        background-color: #0A1F1F;
        border: 1px solid #E65324;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-transform: capitalize;
        color: #FFFFFF;
    }
    #msgDiv {
    }
    .contactImg {
        clear: both;
    }
    -->
    </style></head>
    
    <body>
    <div id="mainDiv" align="center"><div id="headerDiv" align="left">
      <p><img src="images/title.gif" width="448" height="60"></p>
    </div>
    
      <div id="leftDiv">
        <div align="left" class="strpln">
          <p>a quite and relaxed environment</p>
          <p>where creativity and development are</p>
          <p>the foundations of a productive business</p>
          <div id="leftbottomDiv"><img src="images/portfolio.gif" width="89" height="32"></div>
          <div id="rightbottomDiv"><img src="images/contact.gif" width="94" height="26" class="contactImg">
            <div id="msgDiv"><form name="form1" method="post" action=""><textarea name="msgBox" cols="36" rows="9" wrap="physical" class="msgBox">enter your message</textarea>
            </form></div>
          </div>
        </div>
      </div><div id="rightDiv">
        <div align="left">
          <img src="images/whatwedo.gif" width="142" height="25">
          <div id="infoDiv">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>
    can anyone point out where I'm going wrong?
    thanks in advance

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With most screen resolutions, the total width of your divs is wider than the screen -- the divs themselves are 95% of the screen, plus left and right margins of 42px each. So in any screen resolution where 84px is more than 5% of the screen, the two divs don't fit side by side and the right one gets pushed below the left one.

    Mixing percent values and pixels is rather tricky business, you might want to specify both width and margins in the same unit, either percent or pixels.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray, I'll revise and try and use the same measuring method


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
  •