ansaurus

Question

2 Column Div float right and left child divs outside parent

Answer 1

A:

This is simple. Float makes the elements "float" out of the normal page content, which is why it has gone below your container div. Instead of using divs as your child elements, try using a span which are pretty much the same thing but will happily sit next to each other.

m.edmondson 2010-08-31 20:49:49

Answer 2

A:

Try adding these properties to the parent eg whole:

position:relative;
overflow:auto;

And this css to child divs:

position:absolute:
top: xxx;
left: xxx;

Note that you should use id instead of class for an element which is supposed to be only one in the docume'nt.

Sarfraz 2010-08-31 20:50:38

overflow: auto; worked great. I didn't have to change the child divs or the position of the parent.

Peter 2010-08-31 21:14:28

Answer 3

A:

This problem is often referred to as clearing floats. This page has a couple solutions http://www.positioniseverything.net/easyclearing.html along with a link to newer information. "When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag."

joelt 2010-08-31 20:58:12

Answer 4

A:

Clearing with overflow:auto; or the using the clearfix:after trick on the parent div should be sufficient. I wouldn't give absolute positioning to the children as this will stop any elements beneath the wrapper flowing naturally with the page.

staticvoid 2010-08-31 21:04:45

ansaurus

tags:

views:

answers:

2 Column Div float right and left child divs outside parent

related questions