Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aligning elements on same line

Tags:

html

css

I want both labels and textbox appear on same line ("Search for products:" label is above "search" label, i want them to be on the same line), the difference is slight but it exists, I want them to be precise.

online version: link

Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
    <head>
       <title>Test</title>
    </head>
    <body>
      <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>    
 </body>
</html>

CSS:

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

.searchPanel
{
    float: right;
    margin-right: 150px;
    text-align: center;
}
.panel
{
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;

    padding-top:10px;
    width:600px;
 }
like image 334
markiz Avatar asked Dec 29 '25 14:12

markiz


1 Answers

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;
}
like image 152
Ehz Avatar answered Jan 01 '26 06:01

Ehz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!