Clever Geek Handbook

CSS background and floats

So, I am using 960 grid and found a few things that they do not support. I decided to switch to Blueprint, but I need to come back to design later. Anyway, I've simplified my code to show what I'm experiencing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

I am trying to see how the background expands to cover all 3 columns. Is there anything I can do to expand the background so it covers all 3 columns?

+2


source to share


4 answers


You can have a float frame as in:

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}


and this is done. Or you can add an extra element to the "clear fix" frame. The pre-rendered grid 960 does this for you with the "clear" class:

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>
+1


source


Just add this extra rule to your selector:

div.frame {
     overflow:hidden;
}


You don't need to rely on clearfix unless you have any out-of-frame elements and you don't need to rely on any extraneous markup with clear: both.

+2


source


You need to apply the class clearfix

to #bkg.

<div class="frame clearfix" id="bkg">
+1


source


What you want to do is "clear the float". There are many options, some simple and some quite complex.

The easiest way is to add a separator separator after the last column, for example:

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

And that should work.

Here are some other ways (some, pure css):

+1


source






More articles:


All Articles