I thought this would be simple but it's making me feel a bit useless!
>
> I'm simply trying to align two DIVs horizontally for the Search form :
>
> http://www.streetdaddy.com/wsg/test.html
> http://www.streetdaddy.com/wsg/domainname.css
>
> The div with submit button (green border) always gets stacked
> vertically
> under the div with the textfield (red border) but I want it to be
> aligned with the textfield and select list. I originally had
> the whole
> form in one div however differences in the size of form elements made
> some small pixel differences between browsers. Pixel perfect isn't
> necessary, however I'm sure there must be a simple way to
> align the two
> divs!
>
> Am I even close?
>
Yep. Basically, just remove the margin and float #field
#field {
margin: 0;
padding: 0;
float:left;
border: 1px solid #F00;
height: 25px;
}
#submit {
margin: 0;
padding: 0;
float:right;
border: 1px solid #0F0;
height: 25px;
}
As suggested by Tim Hall, I also made the divs the same height. Then all you
need to do is centre your #submit image vertically (I didn't bother messing
with your HTML, but you can obviously do that fairly easily)
And, because floating both divs removes them from the document flow, you
need to add some height to your #search div
#search {
background: url("images/search_bar_bg.gif") #009A00 repeat-y top left;
margin: 0;
padding: 14px 0 14px 40px;
height: 30px;
}
My fiddling was done via the EditCSS plug-in for Firefox, so results may
differ for other browsers
Cheers,
Lachlan
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
