Design/HTML Question on <DIV>

[blogspotter]

How do I put two <Divs> side by side.

EG:
I want to put a Horizontal Adsense Link Unit to the left and a Google Search to the right on the Same line.


SInce both the Code snippet are under two DIVs, the Link Unit comes first and then the search bar.

Even if I do a float left and Float right, the two are not aligned.. They are not on the same line. The first one appears slightly above.

I want the two to be on the same line..

Suggestions, Tips?

 

[123123]

Show some code or example page.

 

[Jizzlobber]

Put them in a wrapper. See below and tweak the widths accordingly.

<div id="wrapper" style="width: 600px;">
     
<div id="div1" style="float: left; width: 400px;">
<--Google Text Link-->
</div>

<div id="div2" style="float: right; width: 200px;">
<--Google Search Box-->
</div>
 
</div>

 

[Jake232]

Or just use <span> instead of <div>

 

[Uptime]

Along with Jizz's suggestion just for grins try a "min-height" element. Not sure why but specified height, auto and no height has been fixed for me more than once by replacing with min-height.

Also you said "The first one appears slightly above." Have you zeroed out or stated your borders, margins / padding?

Is there a dif in FF, IE . . .

 

[blogspotter]

Along with Jizz's suggestion just for grins try a "min-height" element. Not sure why but specified height, auto and no height has been fixed for me more than once by replacing with min-height.

Also you said "The first one appears slightly above." Have you zeroed out or stated your borders, margins / padding?

Is there a dif in FF, IE . . .

Can you plz write that in Code.
I have zeroed out borders but kept margins/padding at 5px


And Thanks Jizzlobber... Will try that..

 

[Uptime]

Can you plz write that in Code.
I have zeroed out borders but kept margins/padding at 5px

And Thanks Jizzlobber... Will try that..

Your request for code example yet no provision from you of the actual problem example reduces the efficiency of this endeavor several fold.

This is NOT proper and does not show wrapper but all I have convenient atm. This sloppy css that I inherited from the original owner would not align properly on a horizontal plane was fixed by adding the min-height.

#Home_BottomBg-lower-pod {
width:1088px;
padding:0px 0px 0px 0px;
border:0px;
margin:4px auto 0 auto;
height: auto;
background-image: url(../images/bottom-container-xxxx-07.png);
background-repeat: repeat-x;
background-color: #FFF;
min-height: 309px;
}

On several occasions multiple floats within a wrapper would not just "level" but also jump below the height of the adjacent div. No amount of wrapper adjuncts corrected, but by accident I found that min-height fixed frequently. ymmv.

Unanswered:
The reason I asked of the difference in view from FF vs. IE is often how the dif browsers interpret the css will give a quick clue to the anomaly. I've beat my head against the screen more than once then looked at it thru another browser and instantly saw the issue.

 

[nickCR]

First make sure you clear: both in a div before the wrapper. This will ensure no other elements affect the floats.

Then you can try this:

<div style="clear:both;"></div>
<div id="wrapper" style="width: 600px;">
<div id="div2" style="float: right; width: 200px;">
<--Google Search Box-->
</div>     
<div id="div1" style="float: left; width: 400px;">
<--Google Text Link-->
</div>
</div>

 

[blogspotter]

Thanks Everyone... It is now working..


Appreciate all your help

 

[justo_tx]

Floats blow, inline-block FTW.

CSS, Inline-Block