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.
/* 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 {}
/* 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).
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.
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 :).
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.
