[SOLVED] CSS positioning situation

[zhangy]

Hi,

I'm trying to line up a form element with a google advertisement. Unfortunately I cant get the alignment I'd like with the code I'm using. Can anyone give me a tip as what I need to change/add in order to get these two elements side by side?

Thanks!

 

html

<div id="googletop">
<script type="text/javascript"><!--
google_ad_client = "pub-8169780304699743";
/* topads */
google_ad_slot = "7826910180";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div id="worldclock">
<form name="where" action="">
<select name="city" size="1" onChange="updateclock(this);"> 
<option value="" selected>Local time</option>
<option value="0">London GMT</option> 

<option value="1">Rome</option>
<option value="7">Bangkok</option>
<option value="8">Hong Kong</option>
<option value="9">Tokyo</option> 
<option value="10">Sydney</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="-8">San Francisco</option> 
<option value="-5">New York</option>

<option value="-3">Buenos Aires</option>
</select>

<script type="text/javascript" src="js/worldClock.js"></script>
<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=125 height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 14px Times New Roman;"></layer></ilayer>
</form>
</div>

 

 

css

#googletop {
	margin-top:10px;
	margin-left:100px;
}

#worldclock{
	float:right;
}

 

[dropfaith]

#googletop {
width:49%;float:left;

}

#worldclock{
    float:right;width:49%;
}

 

try that i removed the margin as  it will bump one down and not the other might be your issue also floated one left one right and set a width

[zhangy]

Thanks it worked! ...sort of.

I'm not sure if this is still a CSS question but now the two elements (ad and clock) are side by side,

but for some reason the form element drop down menu disappears.

 

You can see what I mean here: www.eslassembly.com

 

Also, the distance between the ad and the clock is too large. How can I make it so they are only about 10px distance apart?

[dropfaith]

i cant for the life of me fiqure a reason the form isnt there anymore

#googletop {
width:49%;float:left;

}

#worldclock{
    float:right;width:49%;text-align:left;
}

 

should do it i added text align you could also shrink the width which would work is make the ad 40 percent then the form 60 or whatever is needed for the sizes  i just used 50  50 for an example

 

try that i removed the margin as  it will bump one down and not the other might be your issue also floated one left one right and set a width

 

[zhangy]

Hey thanks a lot Dropfaith!

i just float the clock left and it lined up right next to the ad.

I think the missing clock part is prolly a javascript problem.

Thanks again.