Member Avatar for ryy705

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
  • 82 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ryy705
Member Avatar for pritaeas

You see the two "bar" divs. If you make them float left it may be the effect you want.

Member Avatar for ko ko

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

Member Avatar for ryy705

Thank you both.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.