Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    47
    Thanks
    13
    Thanked 1 Time in 1 Post

    problem nesting floated box inside absolute positioned box

    Hello everyone.

    I'm having a small problem that's almost bringing me to the point of throwing my laptop out of the window

    I have a div created for my main content, and inside it i'm trying to float a box to the right. It works perfectly unless i add text to my main content div, then it doesn't wrap around the div as expected, it makes the div jump down to the bottom...

    here's the link: (content is the div for the main text, content2 is the div which should float left with the text wrapping around it.

    http://www.talkingmakesnosense.com/test/test.html
    Last edited by snmt; 02-24-2008 at 12:30 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this, done in haste and may need cleaning up.

    Frank

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>test</title>
    
    <link href="distance.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    body {
    width: 800px;
    margin: 0px;
    margin-top: 20px;
    background-image:url("http://img81.imageshack.us/img81/562/distrecbgse1.jpg");
    background-repeat:repeat-x;
    background-color: #3b3b3b;
    
    }
    
    
    
    #content
    {display:block;
    font-family: trebuchet ms;
    font-size: 12px;
    color: white; background-color: #FFFFFF ; text decoration: none; padding: 10px 10px; width: 740px; height:600px;
    position: absolute; left: 50px; top: 55px;
    background-image:url("http://img81.imageshack.us/img81/562/distrecbgse1.jpg");
    background-repeat:repeat-x;
    background-color: #3b3b3b;
    overflow:none;
    
    
    }
    #content2
    {margin:5px;padding:5px;
    float:left;
    font-family: trebuchet ms;
    font-size: 12px;
    color: red; background-color: #FFFFFF ; text decoration: none; width: 370px;
    float:right;
    }
    
    
    </style>
    </head>
    
    <body>
    <div id="content">
    <div id="content2">
    <p>
    News<br>
    <br>
    Feb 2008<br>
    <br>
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size 
    </p>
    
    </div>
    <p>
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size. 
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size 
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size 
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size 
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size 
    What would happen if you took the Earth and compressed it down to the size of a tennis ball? No one is saying this is imminent,
    but the thought experiment leads to an intriguing possibility. If you could squash the Earth down to this size. 
    </p>
    
    </div>
    </div>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    To apply float:right to an element, put this element before the other related elements in markup order. No need to give position:absolute to the other element.
    (Your intention is not clear.)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Feb 2008
    Posts
    47
    Thanks
    13
    Thanked 1 Time in 1 Post
    cheers for the fast responses folks!

    effpeetee : what you did works perfect! so you just added that display:block; tag?

    abduraooft : that's just a snippet of code from the full page, i thought my main content box would have to be absolute positioned to stop other elements such as my header div, and another div to the side of the content one making it move around.

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    47
    Thanks
    13
    Thanked 1 Time in 1 Post
    hmmm for some reason the text inside the float is now changed to red, even with a tag added specifying black, any ideas?

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I set it to red. Just change it in the div.

    Frank

    Code:
    #content2
    {margin:5px;padding:5px;
    float:left;
    font-family: trebuchet ms;
    font-size: 12px;
    color: red; background-color: #FFFFFF ; text decoration: none; width: 370px;
    float:right;
    }
    Last edited by effpeetee; 02-24-2008 at 01:04 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Feb 2008
    Posts
    47
    Thanks
    13
    Thanked 1 Time in 1 Post
    yeah I just realised! my stupidity


  •  

    Posting Permissions

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