Help with floats

Discussion in 'Web Design and Development' started by Zanthus, Feb 2, 2011.

  1. Zanthus macrumors member

    Joined:
    Aug 19, 2009
    Location:
    Reading, Uk
    #1
    Hey guys I'm having a couple of issues with floats with this site i'm designing

    http://zanthus.co.uk/VBG/membership.html

    The photo is a float and the text isn't

    what is forcing the text over like that ?

    thanks for any advice

    The photo has these properties:

    #image1 {
    float:left;
    position:relative;
    top:25px;
    left:25px;
    width:240px;
    height:190px;

    }

    and the text has these:


    #membershipcontent {
    background-color:#e9e8e5;
    border-radius: 15px;
    width:650px;
    height:600px;
    position:relative;
    font-family:"Arial Black", Gadget, sans-serif;
    top:25px;
    left:285px;
    padding:10px;
    margin-right:35px;
    margin-bottom:35px;
    }

    Thanks

    Craig
     
  2. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #2
    For your text ( #membershipcontent ), remove the "position: relative" and/or "left: 285px"

    Think of relative positioning as a "nudge" -- the browser does most of the rendering and then moves any elements relatively positioned by the number of pixels you tell it. In your case, 285px on the left which bumps it to the right.

    HTH,

    ~ Jeremy
     
  3. Zanthus thread starter macrumors member

    Joined:
    Aug 19, 2009
    Location:
    Reading, Uk
    #3
    Thats great solved my problem

    thanks
     

Share This Page