CSS layout - float:left causes mysterious vertical gap

**frankvw** · 07-28-2010 10:10 AM

Once more the joy of trying to use pure CSS for layout has me stumped. Please consider, if you will, the following code:

HTML Code:

<div class="layout"
     style="background: orange; width: 400px; text-align: center;
            margin-left: auto; margin-right: auto;
            padding-top: 20px; padding-bottom: 20px;">
  <div class="topbar" style="background: blue;">Topbar goes here</div>
  <div class="menuandcontent" style="background: green;">
    <div class="menu" style="background: yellow;">
      <a class="menu" href="home.html">Home</a><br />
      <a class="menu" href="about.html">About Us</a><br />
      Etc...
    </div>  <!-- /menu -->
    <div class="content">
      <h1>Bork, bork, bork!</h1>
      <p>(Insert chocolate moose recipe here)</p>
    </div> <!-- /content -->
    <div class="footer">(c) 2010 etc.</div>
  </div> <!-- /menuandcontent -->
</div> <!-- /layout -->

It's simple stuff: a centered frame, in which you find a top bar, a left hand side menu, and a content frame. All have different background colors, to show off the different elements. (What I'm trying to do in the real world is using this approach with proper styling including margins, alignment and background images, of course - this is just some code to demonstrate what I'm stuck with.)

What I want is to make the menu <div> float left. So I add a 'float:left' to the <div> of class menu (where the comment below says "HERE"):

HTML Code:

<div class="layout"
     style="background: orange; width: 400px; text-align: center;
            margin-left: auto; margin-right: auto;
            padding-top: 20px; padding-bottom: 20px;">
  <div class="topbar" style="background: blue;">Topbar goes here</div>
  <div class="menuandcontent" style="background: green;">
    <div class="menu" style="background: yellow; float: left">  <!-- HERE -->
      <a class="menu" href="home.html">Home</a><br />
      <a class="menu" href="about.html">About Us</a><br />
      Etc...
    </div>  <!-- /menu -->
    <div class="content">
      <h1>Bork, bork, bork!</h1>
      <p>(Insert chocolate moose recipe here)</p>
    </div> <!-- /content -->
    <div class="footer">(c) 2010 etc.</div>
  </div> <!-- /menuandcontent -->
</div> <!-- /layout -->

That works - the menu floats left, but now I see a gap between my top bar and my menu/content sections. And try as I might, I cannot figure out what's causing it - much less get rid of it. WTF?????

Can anyone enlighten me? Even just a little? What's happening here?

// Frank

**ryanbutler** · 07-28-2010 10:23 AM

Because you have a top padding on your layout div and the menu has a float of left, which takes it out of the normal flow of the document. Something like this is probably what you had in mind:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div class="layout"
     style="background: orange; width: 400px; text-align: center;
            margin-left: auto; margin-right: auto;
            padding-bottom: 20px;">
  <div class="topbar" style="background: red;">Topbar goeshere</div>
  <div class="menuandcontent" style="background: green;">
    <div class="menu" style="background: yellow; float:left;>  <!-- HERE -->
      <a class="menu" href="home.html">Home</a><br />
      <a class="menu" href="about.html">About Us</a><br />
      Etc...
    </div>  <!-- /menu -->
  </div>
  <div class="content" style="float:left;">
      <h1>Bork, bork, bork!</h1>
      <p>(Insert chocolate moose recipe here)</p>
  </div> <!-- /content -->
  <div class="footer" style="clear:left; border:1px solid #000;">(c) 2010 

etc.</div>
</div> <!-- /layout -->
</body>
</html>

What you really need to do is make the layout DIV share the background between the left and right columns (menu and content).

**frankvw** · 08-04-2010 07:29 AM

Hello, Ryan,
Sorry for the late response but I've unexpectedly been out for several days.

Originally Posted by ryanbutler

Because you have a top padding on your layout div and the menu has a float of left, which takes it out of the normal flow of the document.

I wish I understood that. What do you mean by the float taking it out of the normal document flow?

Originally Posted by ryanbutler

Something like this is probably what you had in mind:

That does indeed fix the problem! So thank you for curing that particular headache... But I wish I understood why this works!

// Frank

Thread: CSS layout - float:left causes mysterious vertical gap

Thread Tools

Display

CSS layout - float:left causes mysterious vertical gap

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions