HTML layout problems

Question

I have a problem with dividing a multicolumn layout in HTML.

I have divided the page into two columns.

inner1

• 2 rows.
• another_top1:fixed width,fixed hight
• response :fixed width,variable hight

inner2

• 2 rows.
• another_top2:fixed width,variable hight
• another_below:fixed width,fixed hight

The problem:

When I try to divide inner1 into two columns:

1. inner1
2. inner1_2

Works fine.

---

My inner2 column another_top2 data, appended below floating below inner1_2 ends.

---

CSS:

#another_top1{
  width:500px;
  height:200px;

}

#another_top2 {
 float:right;
 display:inline;
 width:350px;
 padding:0 0 10px 10px;
 margin-bottom:10px;
 color:#fff;
}

#outer{
 background-color:#FFFF99;     
}

#inner1{
  float : left;
}

#inner1_2 { float: left; margin-top:200px;}
 .twoColumn #inner1 { width: 62%; }
 .twoColumn #inner1_2 { display: none; }
 .threeColumn #inner1 { width: 41%; }
 .threeColumn #inner1_2 { width: 21%; }

#inner2{
  float :right; 
  width :39%;
}

How can I fix this?

Answer 1

I feel that the bug is caused by the float in the left column being wider than the column, pushing the content in the right column down. Make sure that the margins or paddings of inner1_2 do not make the box wider than the left column.

I would also recommend making #inner2 a fixed width, i.e. at least the width of your two columns. This way you make sure that the two columns would fit.

Also, check your doctype (http://www.alistapart.com/articles/doctype/) to make sure that you are in standards mode, or correct for box model issues that might appear if you are in quirksmode.

Last, you can use Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) or Xray (http://www.westciv.com/xray/) to check the dimensions of your divs, and then see if it extends beyond the left column.