RE: [WSG] Aligning two DIVs horizontally

[Miles Tillinger]

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
*

Re: [WSG] Aligning two DIVs horizontally

[Lachlan Hardy]

 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
* 

RE: [WSG] Aligning two DIVs horizontally

[Miles Tillinger]

I've tried floating them both left, both right, one left/one right, and in all cases 
the right div drops down a line.

> -Original Message-
> From: Hill, Tim [mailto:[EMAIL PROTECTED]
> Sent: Friday, April 30, 2004 11:06 AM
> To: [EMAIL PROTECTED]
> Subject: RE: [WSG] Aligning two DIVs horizontally
> 
> 
> Could you float both perhaps? Or would that not work?
> The divs would need to be the same height I guess though.
> 
> 
> Tim Hill
> Computer Associates
> Graphic Artist
> tel: +612 9937 0792
> fax: +612 9937 0546
> [EMAIL PROTECTED]
>  
> 
> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On
> Behalf Of Miles Tillinger
> Sent: Friday, 30 April 2004 11:24 AM
> To: Web Standards Group (E-mail)
> Subject: [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?
> 
> Regards,
> 
> Miles Tillinger
> Web Developer
> education.au limited
> 178 Fullarton Road
> Dulwich SA 5065
> Ph. (08) 8334 3247
> Fax. (08) 8334 3211
> Email: [EMAIL PROTECTED]
> Please visit our websites: 
> <http://www.edna.edu.au/>
> <http://www.educationau.edu.au/>
> Building and managing online information services and 
> knowledge networks
> 
> 
> *
> 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
> * 
> 
> 
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

RE: [WSG] Aligning two DIVs horizontally

[Hill, Tim]

Could you float both perhaps? Or would that not work?
The divs would need to be the same height I guess though.


Tim Hill
Computer Associates
Graphic Artist
tel: +612 9937 0792
fax: +612 9937 0546
[EMAIL PROTECTED]
 

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Miles Tillinger
Sent: Friday, 30 April 2004 11:24 AM
To: Web Standards Group (E-mail)
Subject: [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?

Regards,

Miles Tillinger
Web Developer
education.au limited
178 Fullarton Road
Dulwich SA 5065
Ph. (08) 8334 3247
Fax. (08) 8334 3211
Email: [EMAIL PROTECTED]
Please visit our websites: 
<http://www.edna.edu.au/>
<http://www.educationau.edu.au/>
Building and managing online information services and knowledge networks


*
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
*

[WSG] Aligning two DIVs horizontally

[Miles Tillinger]

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?

Regards,

Miles Tillinger
Web Developer
education.au limited 
178 Fullarton Road 
Dulwich SA 5065 
Ph. (08) 8334 3247 
Fax. (08) 8334 3211 
Email: [EMAIL PROTECTED]
Please visit our websites: 
 
 
Building and managing online information services and knowledge networks 

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*