ansaurus

Question

Is there any negative issue if we use `overflow:hidden` to clear float?

Answer 1

A:

it has worked fine for me across most browsers.

Sarfraz 2009-11-19 08:39:51

Answer 2

+1 A:

There is a pretty comprehensive list of float clearing techniques here:

http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing

I personally use the "float the parent" technique exclusively. It works in all commonly found browsers (IE6+, Firefox, Safari, etc.....), and it seems the "least dirty" of all the possible techniques.

Edit for comment:

This should work if I'm understanding you correctly:

#main {
     width: 900px;
     position: absolute;
     left: 50%;
     margin-left: -450px;
}

#col1, #col2, #col3 {
     float: left;
     width: 300px;
}

<body>
     <div id="main">
          <div id="col1"></div>
          <div id="col2"></div>
          <div id="col3"></div>
     </div>
</body>

jarcoal 2009-11-19 16:20:29

can u give me example on how to create 3 col fixed width centered layout with "float the parent" method

metal-gear-solid 2009-11-19 18:12:34

I added an example.

jarcoal 2009-11-19 20:54:55

i didn't understood this part of #main {position: absolute;left:50%; margin-left: -450px;}

metal-gear-solid 2009-11-20 03:23:05

That would center the layout.

jarcoal 2009-11-20 04:44:58

u mean {margin:0 auto} will not work if we use "Float the parent" method to build site

metal-gear-solid 2009-11-20 05:13:59

and is this all browser compatible including IE6

metal-gear-solid 2009-11-20 05:14:31

ansaurus

tags:

views:

answers:

Is there any negative issue if we use `overflow:hidden` to clear float?

related questions