the 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;
 }

online: http://www.webdevout.net/test?01

  • I'm not sure I understand what you're trying to accomplish or what your question is. What do you mean by "align" all elements? Do you want them to all be centered inside your 600px panel? Do you want them to all be flushed on the left side of it and break evenly? NateDSaint about 7 years ago
  • "Search for products:" label is above "search" label, i want them to be on the same line. markiz about 7 years ago
  • Which browser are you using to view this? I'm looking at it in FF 3.5.3 and IE 8, and on the markup for the example I'm seeing "Search for products: (lots of space) Search:(input box)" on the same line. NateDSaint about 7 years ago
  • there is a slight difference... markiz about 7 years ago
  • please read my answer below and see if it satisfies your issue NateDSaint about 7 years ago

2 answers

0
points

I wanted labels on my form fields and wanted them to look nice, appear in their own column (visually) and be right-aligned in that column. This is what I came up with:

<span class="fieldName">Phone:</span>
<asp:TextBox runat="server" ID="Phone" Text="" Enabled="false" Width="300px" />
<br />
<span class="fieldName">Fax:</span>
<asp:TextBox runat="server" ID="Fax" Text="" Enabled="false" Width="300px" />

.fieldName
{
    display: block;
    width: 125px;
    float: left;
    text-align: right;
    padding-right: 3px;
    clear:right;
    font-size:smaller;
}

HTH

Answered about 7 years ago by Keith Barrows
0
points

After communicating a bit with you on your comments I think I see your issue.
The height of these individual elements is not exactly the same, so they are stretched differently from the perspective of the elements above them.
My first suggestion would be that if you are going to use labels on a form, go ahead and use the label tag. This makes it more accessible and helps semantically as you will know labels are the things that go with inputs and are contained within forms, whereas a div could be potentially anything.
I've used your existing demo to provide another : Test Example

Using borders, we can see that a variety of issues had come up with your alignment. Inputs have a default border around them, and this influences their appearance. If the div called ".searchPanel" is 14px tall, and the textbox inside is 14px tall, it's going to overlap, because the border is included in the height. Therefore, I made the input 12px so it has 1px of space above and below, and therefore lines up with the surrounding elements. Also, by floating elements, you take them out of the pageflow, so the containing elements have an issue with how the internal elements stretch them.

Another thing to watch out for is that inline elements and block-level elements will have different heights as they are displayed, so if you want a label (inline) to line up with a text input (block) you'll need to set them to the same size, float them against each other, and make sure they are both displayed as block-level elements. I hope this helps!

Answered about 7 years ago by NateDSaint