SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    can't figure out why my div wont float rigth and top. Should be simple, but...

    I just downloaded notepad++ so I just want to review and hand code a page and then keep working on it.

    should be super simple. but one of my div, floated right and w/in its own content box is not floating right & top.

    Could someone please look at my code & tell me what I am doing wrong please?

    here is the html
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" style="text/css" href="file1CSS.css">
    </head>
    <body>
    <div id="wrapper">
    <div id="nav">  </div> <!--nav-->
    
    <div id="contentBox">
    
    <div id="text1">
    <p class="pr1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. iverra enim. Sed fermentum faucibus massa, at tincidunt sapien tincidunt quis.
    </p>
    </div> <!--text1-->
    
    <div id="text2">
    <p class="pr1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. 
    </p>
    </div> <!--text2-->
    
    <div id="text3">
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at 
    </p>
    </div> <!--text3-->
    
    
    <div id="clear"> </div> <!--clear-->
    </div> <!--contentBox-->
    
    <div id="clear"> </div> <!--clear-->
    <div id="footer">footer content whatever @ 2012</div>
    </div> <!--wrapper-->
    </body>
    </html>
    and here is the css

    Code:
    body{
    background-color:#338585;
    
    
    }
    
    #wrapper{
    background-color:#4D9494;
    margin: 0px auto;
    height: 900;
    width:900;
    border: solid 3px #001F1F;
    
    
    }
    #clear {
    clear:both;
    }
    #nav{
    color:#fff;
    background-color:#003333;
    margin: 0 auto;
    height: 50px;
    width:900;
    border: solid 3px #001F1F;
    
    }
    
    
    #contentBox{
    width:750px;
    margin: 10px auto;
    padding:5px 5px;
    background-color:#339933;
    border: solid 3px #001F1F;
    }
    .pr1{
    margin:0px 5px;
    color: #333300;
    }
    #text1{
    padding: 10px 20px;
    margin: 10px 0px;
    float: left;
    background-color:#99C2C2;
    height: auto;
    width:500px;
    border: solid 2px #001F1F;
    
    }
    #text2{
    padding: 10px 20px;
    float: left;
    background-color:#99C2C2;
    height: auto;
    width:500px;
    border: solid 2px #001F1F;
    }
    
    #text3{
    padding: 10px 20px;
    float: right;
    background-color:#99C2C2;
    height: auto;
    width:150px;
    border: solid 3px #001F1F;
    }
    
    #footer{
    color:#fff;
    background-color:#003333;
    margin: 0 auto;
    height: 50px;
    width:900;
    border: solid 3px #001F1F;
    }
    thank you

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    to solve this (assuming I have understood your problem correctly), just change the order of the divs within the HTML.
    So, you would have:
    HTML Code:
    <div id="contentBox">
      <div id="text3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at </p>
      </div> <!--text3-->
      
      <div id="text1">
        <p class="pr1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at 
        </p>
      </div> <!--text1-->
      
      <div id="text2">
        <p class="pr1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at 
        </p>
      </div> <!--text2-->
      <div id="clear"></div> <!--clear-->
    </div> <!--contentBox-->
    And then just tweak the CSS slightly:
    Code CSS:
    #text3{
      margin-top:10px;
      padding: 10px 20px;
      float: right;
      background-color:#99C2C2;
      height: auto;
      width:150px;
      border: solid 3px #001F1F;
    }

    Does that work?

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you!
    It did work. But can you explain why it had to be reversed? I didn't think that would matter, the float was supposed to take care of that?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    thank you!
    It did work. But can you explain why it had to be reversed? I didn't think that would matter, the float was supposed to take care of that?
    Sure thing.
    Cuz divs are block level elements (as opposed to inline ones).
    You display div#text1 on the page. All good.
    Then you place div#text2 on the page. By default this will always appear under div#text1.
    Then you float div#text3 to the right. div#text3 will always float to the right of div#text2, as div#text1 has claimed the top "row" for itself.
    You could also have arranged the divs like this:

    HTML Code:
    <div id="text1">
    <p class="pr1">Lorem ipsum </p>
    </div>
    
    <div id="text3">
    <p>Lorem ipsum</p>
    </div> <!--text3-->
    
    <div id="text2">
    <p class="pr1">
     Lorem ipsum </p>
    </div> <!--text2-->
    The other way just made more sense to me.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, thank you for the great clear explanation.
    Just one quick last question. Why did not setting a width for div one take care of that?
    I thought if I sized to leave enough space on that side that would do it.
    thank you
    D

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    Why did not setting a width for div one take care of that?
    I thought if I sized to leave enough space on that side that would do it.
    I see your logic, but it doesn't work like that, I'm afraid.
    As I mentioned, as soon as you have another block level element below the fist div, any floats will only float to the right of the second block level element, not the first.
    Floats are confusing at the best of times and not an ideal method for positioning elements (I'm not suggesting you use something else, it's just that floats are tricky and annoying).
    If you want to find out more on the subject, I recommend Chris Coyier's excellent article: http://css-tricks.com/all-about-floats/

    HTH

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    796
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, for the explanation and the link. will go check that out as well.


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
  •