ansaurus

Question

Answer 1

A:

I did it by adding some padding to the following section of the CSS:

.displayModes
{
    float:left;
    padding-left: 2px;
    padding-top: 2px;  
    text-align: center;
}

Buggabill 2009-10-23 15:27:55

This doesn't help. they still not aligned.

markiz 2009-10-23 15:46:41

Answer 2

+1 A:

Wrap all text in divs so you can add top padding so they all line up on the same line well. Always specify widths when floating. I find it easier to specify floats as all left and having specific widths.

Markup

 <div class="panel">
    <div class="displayModes">
       Search for products:          
    </div>
    <div class="searchPanel">
        <div style="float:left;width:60px;padding-top:2px;"> 
            Search :
        </div>
        <div style="float:left;width:100px;"> 
            <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />  
        </div>        
     </div>
  </div>

CSS

.displayModes
{
    float:left;
    width:200px;
    padding-top:2px;
    padding-left: 2px;  
    text-align: center;
}

.searchPanel
{
    float: left;
    width:200px;
    margin-right: 150px;
    text-align: center;
}

.panel
{
    font-family: Arial, Verdana, Sans-serif;
    font-size: 12px;
    padding-top:10px;
    width:600px;
}

Update without extra divs for label centering

Markup

<div class="panel">
    <div class="displayModes">
       Search for products:          
    </div>
    <div class="searchPanel">        
        Search :        
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;"/>                
     </div>
</div>

CSS

.displayModes
{
    float:left;
    width:200px;
    padding-top:4px;
    padding-left: 2px;  
    text-align: center;
}

.searchPanel
{
    float: left;
    width:200px;
    margin-right: 150px;
    text-align: center;
}

.panel
{
    font-family: Arial, Verdana, Sans-serif;
    font-size: 12px;
    padding-top:10px;
    width:600px;
}

OG 2009-10-23 15:33:38

Can't I have both "Search" label and textbox inside one div?

markiz 2009-10-23 15:50:35

Yes, you can. It's just that I don't like the default vertical alignment between inputs and text that browsers give. On the first example the text appears a little low off of the vertical center of the input. But when you have them in separate divs you can make them line up better.

OG 2009-10-23 16:28:21

Can you please add the code(the one with out extra divs) to your answer ? and i will accept your answer.

markiz 2009-10-23 16:38:40

Answer 3

A:

Hi, just set up the line heigh of the div "displayModes" to 20px:

<div class="panel">
   <div class="displayModes">
      Search for products:          
      </div>
      <div class="searchPanel">
        Search :
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />          
      </div>
</div>

CSS:

.displayModes{
   float:left;
   padding-left: 2px;  
   text-align: center;
   line-height: 20px;
}

.searchPanel{
   float: right;
   margin-right: 150px;
   text-align: center;
}

.panel{
   font-family: Arial, Verdana, Sans-serif;
   font-size: 12px;
   padding-top:10px;
   width:500px;
 }

Small suggestion: you have a problem of overflow, just add a "clearer" div to force the childs div to be contained from "panel":

<div class="panel">
   <div class="displayModes">
      Search for products:          
      </div>
      <div class="searchPanel">
        Search :
        <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />          
      </div>
      <div class="clearer"></div>
</div>

CSS:

.clearer{ clear: both; }

FIX: The line-height, of the "displayModes" div, has to be 21px! Tested on FF 3.5.3 and Safari 4.0.3

BitDrink 2009-10-23 15:51:05

can you please explain what do you mean "problem of overflow"? the divs seemed to be displayed fine...

markiz 2009-10-23 15:59:30

Btw, your solution doesn't help, elements still not aligned.

markiz 2009-10-23 16:02:45

On IE I don't know, but in FF and Safari it works fine! The Div "panel" has not a fixed height, so, when you float both the div "displayModes" and the div "searchPanel", they exceed the area of the div father ... so, they overflow the div container! Even if the browser displays all fine, they are not actually contained from the div "panel" ... try to set a background color to the div "panel" and you will see what I meant!

BitDrink 2009-10-23 17:42:40

ansaurus

tags:

views:

answers:

Aligning elements on same line

related questions