CODEWITHSUNDEEP
csshtmlcss-float
Udit Gupta
Udit Gupta

Reputation: 3272

float does not align div elements properly

HTML:

  <div class="table" style="display:table;width:600px">
      <div style="display:table-row">

         <div style="width:30%;float:left;display:table-cell">Flow ID</div> 
         <div style="width:60%;float:right;display:table-cell">
             <input type="text" name="flowid" size="20" id="flowid"/>
         </div> 
         <div style="width:10%,float:right;display:table-cell">  [Default : 32] </div>
      </div>

      <div style="display:table-row">
          <div style="width:30%;float:left;display:table-cell">Traffic Class</div>
          <div style="width:60%;float:right;display:table-cell">
              <input type="text" name="traffic" size="20" id="traffic"/> 
          </div>          
          <div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
      </div>
  </div>

CSS:

div.table {
 font: 81.25%/1 arial,helvetica,sans-serif;
 font-weight:bold;
 background-color:rgb(241,241,241);
 margin: 0 auto;
 width: 50%;
 text-align:center;
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-color: rgb(229, 229, 229);
}

Output I am getting is :

enter image description here

Why this strange behaviour ?

Althoguh first row seems to be correctly organized but still table-cell elements are not aligned completely to left and right. For second row, I have no clue what's going on ?

I am new in using divs as I used to do all these things with tables so please excuse if missing something trivial.

Upvotes: 0

Views: 1074

Answers (2)

risto
risto

Reputation: 1

Why do you use div elements if you decide to display them like a table? You may try something like this: jsfiddle

<ul id="wrapper">
    <li>
        <div style="width:30%;" class="cell">Flow ID</div>
        <div style="width:55%;" class="cell">
            <input type="text" name="flowid" size="20" id="flowid" />
        </div>
        <div style="width:15%;" class="cell">[Default : 32]</div>
    </li>
    <li>
        <div style="width:30%;" class="cell">Traffic Class</div>
        <div style="width:55%;" class="cell">
            <input type="text" name="traffic" size="20" id="traffic" />
        </div>
        <div style="width:15%;" class="cell">[Default : 0]</div>
    </li>
</ul>

#wrapper {
    width: 600px;
    list-style: none;
}
.cell {
    float: left;
}

Upvotes: -1

James Coyle
James Coyle

Reputation: 10428

There is no need for the floats and you also had a typo in one of the inline styles:

width:10%,float:right; should be width:10%;float:right;.

Here is it working: http://jsfiddle.net/sQ4Nb/

Here is how you should have your code: http://jsfiddle.net/cS35y/

And here is a HTML table version: http://jsfiddle.net/53fKu/

Upvotes: 2

Related Questions