SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Location
    USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Under Multiple Left Floats

    I've been goofing with it for a full day and multiple Google searches haven't helped.

    My desired layout is a menu section on the left, then content on the right. The content will contain multiple "float: left;" classes for thumbnails. Then a section with text under the thumbnails (not captions, but a paragraph with text). The problem is that I want this text underneath the thumbnails, but not underneath the menu section.

    Here is some simplified code showing the problem I am having:
    Code:
    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    p {
    	margin: 0px;
    	padding: 0px;
    }
    #menu {
    	float: left;
    	width: 190px;
    	border:1px solid black;}
    }
    #content {
    	margin-left: 200px
    }
    .item {
    	float: left;
    	padding: 5px;
    	margin: 5px;
    	border:1px solid black;
    }
    #info {
    }
    -->
    </style>
    </head>
     
    <body>
        <div id="menu">
          <p>This is the menu area.</p>
          <ul>
            <li>Choice</li>
            <li>Choice</li>
            <li>Choice</li>
          </ul>
        </div>
        <div id="content">
          <div class="item"><p>First thing.</p></div>
          <div class="item"><p>Second thing.</p></div>
          <div class="item"><p>Third thing.</p></div>
          <div id="info"><p>This is some additional text.</p></div>
        </div>
    </body>
    </html>
    I want the "info" div underneath the individual "item" divs, but not all the way underneath the "menu" div. I have tried several things but nothing works. What do I need to do?

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,075
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Remove float: left from #menu, add position: absolute to #menu and put <br clear="left" /> after all the <div class="item">

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Location
    USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! I only have one problem after making the changes. I have a footer on the page (I should have included a footer in the sample code, sorry I didn't). With the changes you suggested, the footer doesn't appear below the menu section; instead it overlaps it.

    Here is some code (based on the above, with the footer added) to show what I am talking about:
    Code:
    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    p {
    	margin: 0px;
    	padding: 0px;
    }
    #menu {
    	position: absolute;
    	width: 190px;
    	border:1px solid black;
    }
    #content {
    	margin-left: 200px;
    }
    .item {
    	float: left;
    	padding: 5px;
    	margin: 5px;
    	border:1px solid black;
    }
    #info {
    	clear: left;
    }
    #footer {
    }
    -->
    </style>
    </head>
    
    <body>
        <div id="menu">
          <p>This is the menu area.</p>
          <ul>
            <li>Choice</li>
            <li>Choice</li>
            <li>Choice</li>
          </ul>
        </div>
        <div id="content">
          <div class="item"><p>First thing.</p></div>
          <div class="item"><p>Second thing.</p></div>
          <div class="item"><p>Third thing.</p></div>
          <div id="info">
            <p>This is some additional text.</p>
          </div>
        </div>
        <div id="footer">
          <p>This is my footer</p>
        </div>
    </body>
    </html>
    I tried using clear:both in the footer CSS but that didn't work.

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,075
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Because the menu is now absolute positioned, it is no longer in the flow of the website, and it's height doesn't count.
    To solve this, you can give #content a min-height, that is the minimum height it should have to make the position of the footer look good.

    Min-height isn't supported in IE6, but using this little trick I recently learned you can make it work.

    Code CSS:
    #content {
      height: auto !important;
      height: 300px;
      min-height: 300px;
    }

    Here min-height and height need to have the same value.

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Location
    USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that my menu will be changing dynamically so I can't set a fixed width. However...

    I FINALLY figured out how to do this. I put a div around the items and set overflow: hidden. Here is the code:

    Code:
    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    p {
    	margin: 0px;
    	padding: 0px;
    }
    #menu {
    	float: left;
    	width: 190px;
    	border:1px solid black;
    }
    #content {
    	margin-left: 200px;
    }
    #item-set {
    	overflow: hidden;
    }
    .item {
    	float: left;
    	padding: 5px;
    	margin: 5px;
    	border:1px solid black;
    }
    #info {
    }
    #footer {
    	clear: both;
    }
    -->
    </style>
    </head>
    
    <body>
        <div id="menu">
          <p>This is the menu area.</p>
          <ul>
            <li>Choice</li>
            <li>Choice</li>
            <li>Choice</li>
          </ul>
        </div>
        <div id="content">
          <div id="item-set">
            <div class="item"><p>First thing.</p></div>
            <div class="item"><p>Second thing.</p></div>
            <div class="item"><p>Third thing.</p></div>
          </div>
          <div id="info">
            <p>This is some additional text.</p>
          </div>
        </div>
        <div id="footer">
          <p>This is my footer</p>
        </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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