Its now lined up ok and I increased the size of the submit image to fill the space. Looks ok in IE as well, until I stuff something else further down the page...
Thanks Tim and Lachlan for the advice :) Miles. > -----Original Message----- > From: Lachlan Hardy [mailto:[EMAIL PROTECTED] > Sent: Friday, April 30, 2004 12:16 PM > To: [EMAIL PROTECTED] > Subject: Re: [WSG] Aligning two DIVs horizontally > > > 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 > ***************************************************** > > ***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
