The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Html overlapping floats

Hey,

I'm trying to make a html column based layout but I'm having some trouble.  I have six div's nested in a seventh div.  I want those six to float next to each other.  There are two classes of divs, the first div of the six has one class the remaining five have another.  All are floated left.

The problem is that the second five divs left edge is flush with the left edge of the screen, overlapping the leftmost div.

Here's the code producing the result:

<!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" xml:lang="en" lang="en">
 <head>
  <title>none</title>
  <script>
  .first {
    float: left;
    width: 8%
  }
  .others {
    float: left;
    width: 18%;
  }
 </head>
 <body>
  <div class="wrapper">
    <div class="first"></div>
    <div class="others"></div>
    <div class="others"></div>
    <div class="others"></div>
    <div class="others"></div>
    <div class="others"></div>
  </div>
 </body>
</html>

Any thoughts as to why this is broken?  Thanks.

Saturday, August 02, 2008
 
 
Malformed HTML. You have an unclosed script tag (when you need a style tag anyway).

<!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" xml:lang="en" lang="en">
 <head>
  <title>none</title>
  <style type="text/css">
  .first {
    float: left;
    width: 8%;
  }
  .others {
    float: left;
    width: 18%;
  }
 </style>
 </head>
 <body>
  <div class="wrapper">
    <div class="first">&nbsp;</div>
    <div class="others">&nbsp;</div>
    <div class="others">&nbsp;</div>
    <div class="others">&nbsp;</div>
    <div class="others">&nbsp;</div>
    <div class="others">&nbsp;</div>
  </div>
 </body>
</html>

In addition, try to always have something inside your divs, even if it's a non-breaking space as I've done above. Otherwise some clients will collapse the DIV.

Saturday, August 02, 2008
 
 
Thanks.  Sorry the html wasn't malform on my system, it was just an artifact of internalizing the external stylesheet for posting here.

Saturday, August 02, 2008
 
 
The first problem is the use of width percentages. The second issue is your wrapper div needs to probably be a float as well and have a width assigned.

What happens is the floats derive their percentage from the parent. The wrapper div probably has no width so, the children dont know what "8%" of what is? Also, floats in FF will break out of a parent div thats also not a float, as they are now in different box model contexts. In other words, many browsers will allow content to overflow outside of parent wrappers simpky because they are trying to enter a page flow thats different.

Try the following to fix this:
1. First make sure the body element has 100% width assigned in a class or inline style.
2. Try making your parent wrapper float:left, width:100%(or some pixel value) and clear:both in its CSS class. That should force all child floats inside the parent and the parent now gives the children a refernce width to use.
2. Now retest. If you still have issues, change the width of the child divs to pixel values rather than percentages. You shouldnt have to but that definately will fix the overlapping floats at this point.

Remember IE7 is still the number one problematic browser as its still doing a few things non-standard. So, if you are testing in that agent, it may have issues with % widths on floating divs. If you are testing in IE5-6, you REALLY have issues, and I can send you more code to address that.
Ranger Send private email
Sunday, August 03, 2008
 
 
I tested your code again in IE6 and IE7 and its floating correctly, based on what you describe. Can you email me a screenshot of the problem and the browser and version you are using.
Ranger Send private email
Sunday, August 03, 2008
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz