Geek Answers Handbook

2 Column Divs float right and left child divs outside parent

I can not find a good solution to this problem. I have 2 divs inside the parent div. When I try and float divs left and right to make 2 columns inside the parent div, the child divs fall under the parent div.

<head> <link rel="stylesheet" type="text/css" href="float.css" /> </head> <body class="wrapper"> <div class= "whole"> <div class="left"> <p> Hello </p> </div> <div class="right"> <p> Hello Again</p> </div> </div> </body>

CSS

 .whole { padding: 30px 30px 15px 30px; background-color: yellow; margin-bottom: 30px; } .left { width:50%; position:relative; float: left; background-color:green; } .right { width:50%; position:relative; float: right; background-color:red; }

Why is the content in the child divs "right, left" below the parent div "whole"?

+4
source share
4 answers

Try adding these properties to the parent element, for example whole :

 position:relative; overflow:auto;

And this css for child divs:

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

Note that you must use id instead of the class for the element, which should be only one in docume'nt.

+3
source

It's simple. Float makes elements float from the normal content of the page, so it sank below your div container. Instead of using divs as your children, try using a range that is almost the same but will happily sit next to each other.

+1
source

This problem is often referred to as float cleaning. There are several solutions on this page http://www.positioniseverything.net/easyclearing.html along with a link to more recent information. “When a float is contained in a container that has a visible border or background, this float does not automatically cause the bottom edge of the container to drop as the float gets higher. Instead, the float is ignored by the container and will exit the bottom of the container like a flag.

+1
source

Overflow cleaning: auto; or using clearfix: after the trick on the parent div should be enough. I would not give absolute positioning to children, as this will stop any elements under the wrapper, flowing naturally with the page.

0
source

More articles:


All Articles