Float layout question

ryy705 · February 28, 2010

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 *************/

haku · March 1, 2010

I'd recommend rethinking your layout. You can do this:

<div id="top_shadow">
  <div id="bottom_shadow">
    <div id="left_shadow">
      <div id="right_shadow">
  	<div id="content">
        Donec gravida consequat tempus! In a metus elit, id gravida urna. Praesent bibendum consequat justo, convallis scelerisque erat sagittis vel. Donec commodo quam volutpat mauris sollicitudin accumsan. In leo metus, sodales eu vulputate vel, tempor eget arcu. Sed fermentum consequat fermentum. Morbi dictum arcu in ipsum molestie ut ultrices lectus ullamcorper. Morbi purus nunc, volutpat at euismod vel, porttitor quis tellus. Proin aliquam scelerisque odio eget tincidunt. Proin elit velit, facilisis a adipiscing quis, faucibus quis elit. In ut lacus eget ipsum fringilla tincidunt at vel lorem. Etiam nec rutrum nisl. Quisque nec diam arcu. Fusce lobortis ultrices iaculis. Fusce vestibulum tristique magna; volutpat.
	</div>
      </div>
    </div>
  </div>
</div>

Then you can apply backgrounds to the various edges:

#top_shadow
{
width:80%;
padding-top:20px;
background-color:red;
margin:0 auto;
}
#bottom_shadow
{
padding-bottom:20px;
background-color:blue;
}
#right_shadow
{
padding-right:20px;
background-color:yellow;
}
#left_shadow
{
padding-left:20px;
background-color:green;
}
#content
{
background-color:white;
}

Sign In

Float layout question

Recommended Posts

ryy705

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information