• 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....


Sunburn

Active Member
#2
Hey MrP,

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

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

mrp2049

Senior Member
#3
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?
 

Sunburn

Active Member
#4
Sorry Mr P,

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

mrp2049

Senior Member
#5
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.
 

Sunburn

Active Member
#6
ah ha! i understand......

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

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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>