0

Hello,

I am experimenting with float layouts.
It is my understanding that if you float three divs to the left they will sit next to each other without bothering any other divs above or below them. As long as the divs have specified width and their container div has enough room.

Unfortunately, my #insdCont div(contains 3 floated divs) is overlapping with .bar div which sits on top of it.

Please copy and paste code below and view it on a browser. The problem will become very apparent.

I would appreciate any advice I can get.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Conforming XHTML 1.1 Template</title>

</head>

<body>
  <div id="canvas">
    <div class="bar">
    </div><!--End .bar -->
	<div id="shdwLft">
	
    </div><!--/#lftSdw-->  
	<div id="insdCont">
	  <div id="masthead">
	   #masthead
      </div><!--/#masthead-->
   	  <div id="copy">
        #copy
      </div><!--/#copy-->

	  <div id="footer">
	    #footer
	  </div><!--/#footer-->
    </div><!--/#insdCont-->
	<div id="shdwRght">
	
	</div>
	<div class="bar">
    </div><!--End .bar -->
  </div><!--/#canvas-->

</body>
</html>
/** Structure ***************************/
#canvas {
  margin-left: auto;
  margin-right: auto;
  width:969px; 
}

#shdwLft{
  float:left;
  height: 834px;
  width: 34px;
  float:left;
  background-color:blue;
}

#insdCont{
  float:left;
  width:901px;
  overflow:hidden;
}

#footer{width:100%;}
#shdwRght{
  height: 834px;
  width: 34px;
  float:left;
  background-color:blue
}

/** End Structure ********************/

/** Styling Pieces*******************/
.bar {
	background-color:#840018;
	height:10px;
	width:100%;
}

/** End Stylig Pieces *************/
3
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by ryy705
0

Do you want the two bars at the top and bottom. The second bar was not correctly rendered, and it appeared at the bottom of the first bar. Put the statement 'clear: both' to the 'bar. Here it is

.bar {
	background-color:#840018;
        clear: both;
	height:10px;
	width:100%;
}

Good luck..

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.