simple HTML problem

Question

I am using HTML. I have divided the page into two columns: inner1 and inner2.

• Inner1 has some data, it does not have the problem it has in column1.
• Inner2 has a problem: since Inner2 is divided into two rows [in the same column2]
• point2- It has variable data[row -1]
• another_new - It has fixed data[row-2]

HTML:

    <div id="outer">
       <div id="inner1">
         <div id="point1">
         </div>
         <div id="response">
         </div>
      </div>
     <div id="inner2">
        <div id="point2"><!-- varaiable data-->
        </div>
         <div id="another_new"><!-- fixed data-->
         </div> 
      </div>
   </div>

CSS:

#inner1{
    float : left;
    width :61%;
}
#inner2{
    float :right; 
    width :39%;
}

Now how to display the page? Point2 data should not overlap on another_new data. Any idea?

Answer 1

Change your CSS so that both columns are both set to float: left; This will make your columns stack one after the other.

You may also have to reduce the widths you have given there. Some browsers like Internet Explorer tend not to like having widths of 100% (61% + 39%) and will, therefore, cause the furthest right floated item wrap on to the next line.

I'm only guessing that this is your problem :o)

Edit:

You could also try adding the CSS

clear: both;

to the div 'another_new'. This will push it below 'point2'regardless of how big point2 is.

Answer 2

You are perfectly welcome to float one column left and the other right. Your problem is most likely coming from the fact that you're utilizing 100% of the width. If these divs have any margins or borders associated with them, it could cause them to be wider than you expect, and therefore not fit side-by-side. Some browsers will have problems with this even if there are no margins/borders. Try reducing the width of one of the columns by 1% or so.

Another possibility is the clear attribute. Ensure that both columns have a clear: none; applied to them. Alternatively, you can apply a clear: left; to the left column, and a clear: right; to the right column.

Depending on the specific situation and browser in use, it could also help to have a "followup" div after your two columns:

<div class="col1"></div>
<div class="col2"></div>
<div class="clearBoth"></div>

div.clearBoth
{
   clear: both;
   height: 0px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}

Also, you may be interested in the clearFix trick for CSS: here