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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    floated image outsive of div

    Hi guys, noob question, but when I saw this it broke some of the rules I thought I had known.

    I want to float my image to the right and have paragraph text wrap around it. I do not know why the image is outside of my #main div with the gray background and darkblue border, but I don't want it to be. Relative code below.

    www.gowithjon.com/aboutme.html

    <div id="main">
    <h2> About myself <h2>
    <hr>

    <img src="img/aboutme/me.jpg" style="position: relative; float: right">

    <p>...</p>

    </div>

    *I don't think position: relative is necessary, but not having it doesn't change anything.

    #main {
    position: relative;
    top: -20px;
    background: #EAF3F8;
    border: 20px #153e56 solid;
    margin: 0px 50px;
    width: 60%;

    }

    Thanks all

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It's because the <img> is floated, so #main doesn't extend to the bottom of it (although it does in IE, technically incorrectly). Try adding overflow:auto to #main - this will clear your float and extend #main.


  •  

    Posting Permissions

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