All geek questions in one place

Aligning elements on the same line

I want both the labels and the text box to appear on the same line (the label "Search for products:" above the label "search", I want them to be on the same line), the difference is small, but it exists, I want them more precisely.

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;
 }
+3
source share
3 answers

Wrap all the text in a div so you can add a top pad so they all line up on the same line well. Always indicate the width when swimming. It’s easier for me to specify the float as everything on the left and have a specific width.

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 additional sections for centering labels

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;
}
+2
source

, CSS:

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

div "displayModes" 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;
 }

A small suggestion: you have an overflow problem, just add a “sharper” div to include the child div from the “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 div-displayModes should be 21px! Tested on FF 3.5.3 and Safari 4.0.3

0
source

Source: https://habr.com/ru/post/1720907/

More articles:


All Articles