Menu
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;
}
334
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
