SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    two floating divs won't align within parent div

    Got a really simple question: if I have a 400px wide div, and in in two floating 200px wide divs, why won't they align properly?

    Code:
    <div style="background-color: #000000; width:400px; height:300px; padding:0; margin:0">
    * <div  style="background-color:#f000aa;  padding:0;  margin:0;  height:100px;  width:200px;  float:right;"></div>
    * <div  style="background-color:#f0f0ee;  padding:0;  margin:0;  height:100px;  width:200px;  float:left;"></div>
    </div>
    you can see they have margin and padding set to 0 so I don't understand what's going on (screenshot attached)
    blocks.png

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    They are aligned for me ok, you don't actually have those asterisk' in there do you?
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    .wrapper {
      width: 400px;
      height: 300px;
      background: #000;
    }
    .right {
      float: right;
      height: 100px;
      width: 200px;
      background: #f000aa;
    }
    .left {
      float: left;
      height: 100px;
      width: 200px;
      background: #f0f0ee;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
      <div class="right"></div>
      <div class="left"></div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, no asterisk' those were somehow added during copying and pasting..

    well, you code works! why didn't mine :|

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DavidGol View Post
    no, no asterisk' those were somehow added during copying and pasting..

    well, you code works! why didn't mine :|

    Hi David,

    When I removed the asterisks after copying and pasting, it worked fine so I think they are somehow in your code.

    Jim

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Were you using something like Microsoft Word to generate that code?


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
  •