Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Having issues with my floats....

Discussion in 'Website Design Forum:' started by mrp2049, Mar 30, 2011.

  1. mrp2049

    mrp2049 Senior Member

    Cheap gag? Oh yes!

    without float right

    Cell Therapy LTD

    with float right!

    Whenever I add the float:right to the copy section, for some reason it closes my main wrapper.

    I have no idea why this is happening, anybody want to point at the (no doubt idiotic) mistake I am making?
  2. Sunburn

    Sunburn Active Member

    Hey MrP,

    Not sure why your wanting to float but anyways, try this...

    Line #70 add the following...
    #wrapper { blah...blah....overflow:hidden;}
    hope this does want i think you want it to do :)
  3. mrp2049

    mrp2049 Senior Member

    What are the alternatives then good sir?

    It is the easiest way I have come across to get a left and right position. Or should I be using div allign's?
  4. Sunburn

    Sunburn Active Member

    Sorry Mr P,

    I dont understand what your trying to achieve within your design/build hence forth the above question regarding float usage :)
  5. mrp2049

    mrp2049 Senior Member

    Ah right.

    I want a left and right column on the main part of the page. When I add the float to create the right column, thats where the page goes screwy.

    I wish I could explain this better, but I am still learning.
  6. Sunburn

    Sunburn Active Member

    ah ha! i understand......

    try this.... (save it to index.html and open file in browser)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><html xmlns="" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=7;FF=3;OtherUA=4" /><!-- Cutting Edge IE=Edge --><title>Simple float example</title><style type="text/css">* {margin:o;padding:0;}#wrapper {width:600px;background: red;overflow:hidden;}#float-left {float:left;width:300px;background: cyan;}#float-right {float:right;width:300px;background: lime;}</style></head><body><div id="wrapper"><!-- im coloured redwhen floating elements the parent container will collapse unless its instructedto clear all children of you can do this by applying attibute overflow:hidden  this makes the wrapper aware of the floated divs -->    <div id="float-left">        <!-- im coloured cyan -->        Im floating left    </div>    <!-- im floating to left in the parent container -->        <div id="float-right">        <!-- im coloured lime-->        Im floating right    </div>    <!-- im floating to right in the parent container --></div></body></html>
  7. mrp2049

    mrp2049 Senior Member

    Thank Mr Moore, I shall get on that!

Share This Page