Thread: Float drop

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    13
    Rep Power
    0

    Float drop


    Hi All,

    I have a problem related to float drop, my site uses a liquid layout split 15%:85%, if the browser is wide enough it will look fine, but otherwise the content drops below the nav bar. I don't have any unbreakable text in the content area....

    The problem has only been introduced since I added a min-width property to my sidebar.

    I have read lots of tutorials on the subject, and have experimented with various clear and overflow properties and extra container divs but to no avail.

    Maybe I am approaching the problem in the wrong way, the reason I added min-width to the sidebar is because when the browser is made smaller the menu buttons can overlap onto the main content.

    The site is currently hosted on my laptop here. I will try and keep it online as much as possible for a few days.

    If anyone can give me some pointers I'd be very grateful.

    Jez
  2. #2
  3. K-Mart-ian Legend
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2004
    Location
    United States
    Posts
    303
    Rep Power
    55
    I'm looking at this in 2 browsers on 2 monitors. Both monitors run at 1280x1024 and both see the content before the nav menu. So I see the following:

    Firefox 3.5.5: looks fine except content under menu
    IE 8 normal: menu style broken, ontent under menu
    IE 8 compat mode: menu looks fine, content under menu, footer div height not correct

    However, I am wondering about your div layout, as it appears to be like this:

    <div container>
    <menu div>
    <content div>
    </div container>

    Whereas it may function better as

    <div container>
    <menu div>
    Content
    </div container>

    Here is a page you can view an example (something I was playing around with) where the same type of layout is used. Here, you see that the CONTENT sits inside the "content" div, and the "map" div is in there also.
    http://tripredacus.net/hist/beta.php

    Also, checking your CSS, you have #sidebar1 and #mainContent both set to float left.
  4. #3
  5. No Profile Picture
    looking for beautiful code..
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    114
    Rep Power
    67
    the best solution i could find for you is to:

    nest the sidebar in the mainContent div right before your navbar div, then set the width of the mainContent to 100%.
    your new layout.css:

    Code:
    @charset "utf-8";
    @import url("reset.css");
    @import url("SpryMenuBarVertical.css");
    
    html, body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background-color: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for 
    
    differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left 
    
    aligned default in the #container selector */
    	color: #633C91;
    }
    
    #container { 
    	width: 80%;  /* this will create a container 80% of the browser width */
    	background-color: #FFFFFF;
    	margin: 2px auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    } 
    
    #header {
    	margin: 0; 
    	background-color: #DDDDDD; 
    	padding: 5px 20px;
    } 
    
    
    #header img {
    	vertical-align: middle;
    }
    
    
    /* Tips for sidebar1:
    1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the 
    
    overall width for standards compliant browsers creating an unknown actual width. 
    2. Since em units are used for the sidebar value, be aware that its width will vary with different default text 
    
    sizes.
    3. Space between the side of the div and the elements within it can be created by placing a left and right margin 
    
    on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule.
    */
    
    #sidebar1 {
    	float: left; 
    	width: 15%; /* since this element is floated, a width must be given */
    	background-color: #EBEBEB; /* the background color will be displayed for the length of the content in the 
    
    column, but no further */
    	padding: 10px 0; /* top and bottom padding create visual space within this div  */
    	margin: 0;
    	text-align: center;
    	min-width: 10em;
    }
    
    /* Tips for mainContent:
    1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No 
    
    matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if 
    
    you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
    2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) 
    
    if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-
    
    based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the 
    
    user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent 
    
    div. You should be aware of this limitation - especially if the client is adding content with Contribute.
    3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent 
    
    "hasLayout." This may help avoid several IE-specific bugs.
    */
    
    #mainContent { 
    	border-top: 1px solid #000;
    	margin: 0; /* the right margin can be given in percentages or pixels. It creates the space down the right 
    
    side of the page. */
    	padding: 0;
    	width: 100%;
    	float: left;
    	overflow: auto;
    } 
    
    #pageContent {
    	margin: 0;
    	padding: 10px;
    	overflow: auto;
    }
    
    #navbar { 
    	background-color: #AAAAAA;
    	margin: 0;
    	padding: 1px 10px;
    } 
    
    #navbar, #navbar a {
    	color:#FF0000;
    	font-size: small;	
    } 
    
    #navbar a:link, #navbar a:visited {
    	text-decoration:none;
    }
    
    #navbar a:hover, #navbar a:active { 
    	text-decoration:underline;
    }
    
    #footer { 
    	padding: 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. 
    
    */
    	background:#DDDDDD;
    } 
    
    #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin 
    
    collapse - a space between divs */
    	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without 
    
    the margin collapse issue */
    }
    
    /* Miscellaneous classes for reuse */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the 
    
    element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the 
    
    close of a container that should fully contain a float */
    	clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }
    
    /* Custom CSS */
    
    .msgreen {
    	color: #BEDA57;
    }
    
    .msblue {
    	color: #81C4E2;
    }
    
    .mspurple {
    	color: #633C91;
    }
    
    .failed {
    	color: #FF0000;
    }
    
    
    h1 {
    	color: #BEDA57;
    	font-size: 150%;
    	font-weight: bolder;
    	margin-top: 5px;
    	margin-bottom: 5px;
    }
    
    h2 {
    	color: #81C4E2;
    	font-size: 140%;
    	font-weight: bold;
    	margin-top: 3px;
    	margin-bottom: 3px;
    }
    
    h3 {
    	color: #633C91;
    	font-size: 140%;
    	margin-top: 2px;
    	margin-bottom: 2px;
    }
    
    p {
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    
    a:link, a:visited {
    	text-decoration:none;
    }
    
    a:hover, a:active { 
    	text-decoration:underline;
    }
    
    small {
    	font-size: 60%;
    }
    
    fieldset {  
    	margin: 1.5em 0 0 0;  
    	padding: 5px;
    	border-color: #633C91;
    	border-width: 2px;
    	background-color: #81C4E2;
    }
     
    legend {  
    	margin-left: 1em;  
    	color: #633C91;  
    	font-weight: bold;  
    }
    
    legend span {
    	position: absolute;
    	margin-top: 0.5em;
    }
     
    fieldset ol {  
    	padding: 2.5em 1em 0 1em;  
    	list-style: none;  
    }  
    
    fieldset li {  
    	padding-bottom: 1em;  
    }  
    
    fieldset.submit {  
    	border-style: none; 
    	background-color: transparent;
    }
    
    label {    
    	display: block;
    	color: #633C91;
    }
    
    input.btn {
    	border: 1px solid;
    	background-color: #81C4E2;
    	color: #633C91;
    	font: bold;
    }
    
    input.btnhov{
    	border-color: #FF0000;
    }
    and your new html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Mseis</title>
    
    <link href="includes/layout.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    <div id="container">
      <div id="header">
    
    <img src="images/logo.gif" alt="Dolphin" height="100" width="100" />
    
    <img src="images/name.gif" alt="Mseis" height="65" width="325" />
      <!-- end #header --></div>
      <div id="mainContent">
    <div id="sidebar1">
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <ul id="RootMenu" class="MenuBarVertical">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About Us</a></li>
    
      <li><a href="services.php" class="MenuBarItemSubmenu">Services</a>
        <ul>
          <li><a href="pam.php">Passive Acoustic Monitoring</a></li>
          <li><a href="training.php">Training</a></li>
          <li><a href="projectmanagement.php">Project Management</a></li>
          <li><a href="consultancy.php">Seismic Consultancy</a></li>
    
          <li><a href="installations.php">Technical Installations</a></li>
        </ul>
      </li>
    <li><a href="#" class="MenuBarItemSubmenu">Personnel</a>
          <ul>
            <li><a href="#">Mseis</a></li>
            <li><a href="#">3rd Party</a></li>
    
          </ul>
        </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    <p>&nbsp;</p>
    <ul id="StaffMenu" class="MenuBarVertical">
      <li><a href="webmail.php">Webmail</a> </li>
      <li><a href="resources.php">Operator Resources</a></li>  <li><a href="client.php">Client Resources</a></li>
    
      </ul>
    
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("RootMenu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("StaffMenu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
        <!-- end #sidebar1 -->
      </div>
      <div id="navbar">
      <a href="index.php">Home</a>
          <!-- end #navbar --></div>
    
          
          <div id="pageContent">
            <h1>MSeis</h1>
            <h2>Specialists in the needs of the seismic industry</h2>
            <p>The core of our business is the manufacture, installation and operation of passive acoustic monitoring (PAM) systems.</p>
            <p>PAM is increasing being used within seismic surveys....</p>
            <p>Our flagship system is called Night Hawk, please <a href="#">click here</a> for more information.</p>
    
            <p>Our other areas of business include project management, seismic consultancy, training of PAM operators and technical installations. Please see the menu on the left for further information.</p>
            <h3>Put a picture here somewhere 
              <!-- end #pageContent -->
            </h3>
        </div>
    	<!-- end #mainContent --></div>
    
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
    	<br class="clearfloat" />
    
    	<div id="footer">
    <div class="fltrt">
    
    <span class="msgreen">
    enquiries@mseis.com   +44 (0)1934  712033
    </span><br />
    <span class="msblue">
    Pilgrim Cottage, Top Road, Chapel Allerton, Somerset, BS22 2PP<br />
    </span>
    <span class="mspurple">
    Registered company number: 05078814<br />
    </span>
    
    </div>
    
    <br class="clearfloat" />  <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    this allows the pageContent div to expand starting from the mainContent div's width minus 15% so long as pageContent's width is less than or equal to mainContent's width - 10em (the min-width you have set for sidebar1). Your prior structure was theoretically correct, however, it allowed for the combined width of pageContent (and mainContent) and sidebar1 to go beyond the width of the container div.

    More specifically, say the browser i set to 800x600px.

    At this setting, #sidebar1 would attempt to resize to 15% of 800px (800px is the min-width of the container). this amounts to 120px, which in my case is less than the defined min-width of 10em (which is about 160px i think for this setting).

    Then, #mainContent attempts to resize to 85% of 800px. this equals 680px.

    added together, 160px + 680px obviously is more than the given 800px of the container, and so it bumps the #mainContent down to the next line.

    Using my structure, the following occurs:

    Given 800x600px again as the dimensions-

    #mainContent inherits 100% width of the container = 800px.

    #siderbar1 attempts to inherit 15% of 800px, but defaults to 10em (160px) as defined by its min-width

    #pageContent auto-stretches to the remaining space of #mainContent (800px-160px = 640px).

    let me know if you have questions.

    -j.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    13
    Rep Power
    0
    Hi Guys,

    Thank you both for your detailed and informative replies.

    The layout you suggested NXInteractif I can see working very well, thank you for the time you put into testing it I will try and implement this across the site and get it working with all my include files.

    Tripredacus, I was aware of the IE rendering issue which I will need to look into more, if I can't solve it I may need to ask for some more help! I wasn't aware there was a problem with floating two object the same direction as long as they line up against each other properly, I may be wrong!

    Thanks again

    Jez

IMN logo majestic logo threadwatch logo seochat tools logo