CODEWITHSUNDEEP
cssxhtmlhtml
xraminx
xraminx

Reputation: 1176

Nested DIV elements

I am trying to enclose two DIV elements, inner-1 & inner-2, (dotted red border) inside a wrapper DIV (solid green border) but the wrapper DIV element does not expand to enclose the inner DIVs.

What am I doing wrong?

<!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">

<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>
</body>
</html>

Rendered HTML

Upvotes: 20

Views: 76589

Answers (5)

wlashell
wlashell

Reputation: 898

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.

Upvotes: 2

Rob
Rob

Reputation: 3066

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;}

Upvotes: 2

mupdyke
mupdyke

Reputation: 127

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">
<html xmlns="http://www.w3.org/1999/xhtml">

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

Upvotes: 3

moff
moff

Reputation: 6503

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.

Upvotes: 33

Anand
Anand

Reputation: 7764

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

Upvotes: 4

Related Questions