ansaurus

Question

Nested DIV elements

Answer 1

+1 A:

.
.
.
 <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
     content inside inner-2 div 
 </div>
 <br style="clear:both" />
</div>
.
.
.

Try that.

You can set the margins for the <br /> so that it is hardly visible too.

trex279 2009-07-06 15:29:27

Answer 2

+11 A:

Since you're floating both #inner-1 and #inner-2, you'll need a clear fix. Basically, setting overflow: auto on the parent (#wrapper) should do the trick.

moff 2009-07-06 15:30:20

+1 for beating me to it.

geowa4 2009-07-06 15:31:15

Thank you :) It saved me.

xraminx 2009-07-06 16:34:12

You're welcome :)

moff 2009-07-06 16:34:29

Answer 3

+1 A:

It is the floats that are giving you the problem. this might work for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
  <div style="clear: both"></div>
</div>
</body>
</html>

Added "div style="clear: both">" at the bottom of the containing DIV.

mupdyke 2009-07-06 15:38:55

-1 Unsemantic solution

Josh Stodola 2009-07-06 15:46:13

Answer 4

+1 A:

It might also be worth noting that there are a few different methods of "clearing floats" out there. This one works pretty well for me and only involves adding a single class to the parent element:

.clearfix:after{content:"\0020";display:block;height:0;clear:both;
 visibility:hidden;overflow:hidden;}

Rob 2009-07-06 15:44:15

Answer 5

+1 A:

As has been said already you need some method of forcing the containing div to realize the floating divs have taken up space. Commonly known as clearing a float, there are quite a few discussions on the topic around the internet.

This post at pathf.com is one of the more popular to use. When you read the article be sure to read all the comments as well.

wlashell 2009-07-06 16:06:22

ansaurus

tags:

views:

answers:

Nested DIV elements

related questions