SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align two divs horizontally

    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?

    Code:
    <?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>
    Code:
    /* nav2/search align */
    #search, #nav2 {margin: 1&#37; 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 {}

  2. #2
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE8, btw..

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

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Float both divs left and give them widths that add up to the total width of the container.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

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

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

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Try reversing the floats.

    e.g.
    Code:
    #main-content #search{float:right}
    #main-content #shownav{float:left}

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Try reversing the floats.

    e.g.
    Code:
    #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.

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to show the HTML and CSS for those modules.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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 .

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    And post the code that the browserr gives you when you View Source, not the jdoc php stuff.

  12. #12
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen View Post
    You'll need to show the HTML and CSS for those modules.
    Of course, how silly of me.

    Code:
    /* 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; }
    Code:
    	
    <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>

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code:
    #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
    }

  15. #15
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch!

    Anyway to mark threads solved?

    *sigh* now onto the next problem...

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by goltoof View Post
    Anyway to mark threads solved?
    Nope
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •