www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62

    Question CSS layout - float:left causes mysterious vertical gap

    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

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    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).

  3. #3
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62
    Hello, Ryan,
    Sorry for the late response but I've unexpectedly been out for several days.

    Quote Originally Posted by ryanbutler View Post
    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?

    Quote Originally Posted by ryanbutler View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles