align two divs horizontally

[goltoof]

I just want to get 2 divs, one a horizontal menu, the other a search box, to align side by side. I'm using afterburner template.

It works fine in firefox, in IE the search box is all the way to the left (it needs to be right) and the menu is unclickable. I tried swapping z-index of both modules and the search box still lays on top.

What's wrong here?

<?php if ($this->countModules('nav2 or search')) : ?>
<div id="nav2">
	<jdoc:include type="modules" name="nav2" style="none" />
</div>
<div id="search">
	<jdoc:include type="modules" name="search" style="none" />
</div>
<?php endif; ?>
<div class="clear"></div>

/* nav2/search align */
#search, #nav2 {margin: 1% 0 1% 1%;}
.clear {height: 0; font-size: 1px;  margin: 0;  padding: 0;  line-height: 0; clear:both;}

/* search */
#search {background-image:url(../images/bg/search.png); margin: 1% 1% 1% 0; float:right; position:relative; }

/* nav2 */
#nav2 {height:20px;background:#;width:762; margin: 1% 0 1% 1%; float:left; position:relative; }
#nav2 ul {margin:0 0 0 0;}
#nav2 li {background:#; margin-bottom:10px; list-style:none;width:130px;height:20px;text-align:center;border-left:1px solid #ddd; z-index:2000;}
#nav2 li a {display:block;line-height:20px;color:#5e5e5e;font-weight:bold;font-size:80%;}
#nav2 li.active a {background:#;color:#4E45FF;z-index:2000;}
#nav2 li a:hover, #nav li:hover a, #nav li.sfHover a {background:#;color:#FFC524;text-decoration:none;}
#nav2 li ul {;width:170px;left:-999em;margin-left:-1px;border:1px solid #295770;border-top:0;text-align:left;}
#nav2 li ul ul {margin:-31px 0 0 170px;display:inline;}
#nav2 li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul, #nav li.sfHover ul ul ul ul {left:-999em;}
#nav2 li li {background:#FFFFFF none repeat scroll 0 0;height:auto;padding:0;width:170px;}
#nav2 li li a, #nav li li.active a, #nav li li a:hover {margin:0;height:20px;line-height:20px;background:#fff;border-top:0px solid #295770;color:#34647F;}
#nav2 li li a, #nav li.active li a {font-weight:normal;font-size:85%;}
#nav2 li:hover ul, #nav li.sfHover ul {}
#nav2 li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul, #nav li li li li.sfHover ul {}

[goltoof]

IE8, btw..

If you need to see what's happening I'll PM you a link.

[Tyssen]

Float both divs left and give them widths that add up to the total width of the container.

[Paul O'B]

If John's (Tyssen) suggestions don't sort you out then we'd need a link. (You can PM me the link as a last resort if you want it kept private.)

Off Topic:


Hi John nice to see you around - hope you are well

[Paul O'B]

HI,

I've looked at the link you sent me so try this:

/* search */
#search {
    background-image:url(../images/bg/search.png);
    float:left;
    width:auto;/* was 25px */
    margin-right:15px;
}
#search table{width:auto}
#shownav{
    width:auto!important;
}

You had a width set on the floated search that didn't match its content so it overlapped. The table needed to be auto width and the nav needs to be auto width also (not sure why you need a table there anyway).

[goltoof]

You had a width set on the floated search that didn't match its content so it overlapped. The table needed to be auto width and the nav needs to be auto width also (not sure why you need a table there anyway).

That caught the overlapping problem, but now the search bar is on the left of the menu, needs to be on the right.


Other than that, it looks good in ie.

[Paul O'B]

Try reversing the floats.

e.g.

#main-content #search{float:right}
#main-content #shownav{float:left}

[goltoof]

Try reversing the floats.

e.g.

#main-content #search{float:right}
#main-content #shownav{float:left}

Bingo. The only other thing is a similar problem with the modules above. The logo won't align horizontally with the modules on the right. They're "stacking" on top of each other. The width of the modules is correct. floating left/right doesn't make a difference.

[Tyssen]

You'll need to show the HTML and CSS for those modules.

[Paul O'B]

Yes try posting the relevant code here first as it's not good etiquette for me to sort things out in private as the forums are meant to be useful for all. If that doesn't work then as a last resort I will take a look at the link you sent me .

[Stomme poes]

And post the code that the browserr gives you when you View Source, not the jdoc php stuff.

[goltoof]

You'll need to show the HTML and CSS for those modules.

Of course, how silly of me.

/* top */
#logo {width:425px;height:53px;background:url(../images/light4.png) 0 -286px; 
          background-repeat: no-repeat; display:block;margin:20px 0px;}
#header {overflow:hidden;padding:0px 0px 0px 5px;}
#header li {list-style:none;float:left;padding-left:15px;font-weight:bold;}
#headerwrapper {overflow:hidden; padding:0px 0px 0px 0px;}
#header .module {float:right;margin-left:325px;}

/* poping links */
.poping_links {display:block; text-align:center !Important; position:relative; overflow:hidden; 
                     margin-left: auto; margin-right: 100px; margin-top:0; padding:3px 10px 3px 10px;
                     background:url(images/toplinks.png); background-position:center; background-repeat:no-repeat; width:300px;
                     color:#fff; font-size:9px; font-weight:normal; font-family: "Verdana", Helvetica, Arial, sans-serif;}

/* top contact */
.mcontact-top .module-body {background-image:url(contact-top-bg.png); height:22px; float: right; 
                     width:283px; color:#666; font-size:10px; font-weight:normal; 
                     font-family: "Verdana", Helvetica, Arial, sans-serif; text-align:center; 
                     margin-right:20px; margin-top:10px; padding: 5px 0px 0px 0px; }

	
<div id="header">	
	<div class="module">
		<div class="module-body">
			<script type="text/javascript"></script>
			<div class="poping_links">
				<a onclick="this.blur();showThem('reg_pop');return false;" href="javascript:;"></a>
				<a id="openLogin" onclick="this.blur();showThem('login_pop');return false;" href="javascript:;">Login</a> |
				<a id="openReg" onclick="this.blur();showThem('reg_pop');return false;" href="javascript:;">Register</a> 
			</div>
                </div>
	</div>
	
	<div class="module mcontact-top">
		<div class="module-body">
			<!-- /mod_html  -->  
			<a href="http://"><img src="contact-top-salesbtn1.png"></a>  
			<a href="http://"><img src="contact-top-supportbtn1.png"></a> 
			<!-- mod_html version 1.0.0.Alpha1-J1.5/ -->
                 </div>
	</div>
	<a id="logo" href="http://"></a>
</div>

[Stomme poes]

I'm confused. They both have the class of .module which is floated right plus a left margin of 325px.

That's a pretty big margin. I don't know the size of the container they are inside, and I do not know their width, but with margins that large, I wonder again if there really is room for them side-by-side?

Floats drop when there isn't. Giving each .module a (different) background colour would help, though it won't show you the margins (though if you want to see them you could either temporarily make them padding instead, or use some tool like Firebug or whatever). At least then you'll know if there's a lack of space inside their container or not.

[Paul O'B]

Yes remove the margin left on the right float because that will stop any content going alongside in IE. Just use clear:right to clear the top menu.

#headerwrapper {
    overflow:hidden;
    padding:0;
    margin:0 0 20px;
}
#logo {
    width:425px;
    height:53px;
    background:url(../images/light4.png) 0 -286px;
    background-repeat: no-repeat;
    float:left;
    margin:0
}
#header .module {
    float:right;
    clear:right
}

[goltoof]

Thanks a bunch!

Anyway to mark threads solved?

*sigh* now onto the next problem...

[RyanReese]

Anyway to mark threads solved?

Nope