Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts

    DIVS are making me crazy!!

    Ok I have been playing with this thing since yesterday morning and I think I just need some new sets of eyes. I am designing this template for joomla from a clients specs, well his design, let's not go there.

    At any rate my two divs are miss aligned, the one on the left with the user form and search and the one on the right with the menu items and the social icons. The one on the right should be right up next to the user one on the left. I am attaching three screen shots. The first one is regular, the left side has no float at all and right side has float: right. (Just side note, I added the borders so everyone can see the divs boundings). The second screenshot is when I add a float: left to the left div and keep the right div with float: right. When I float: left the right div nothing, it just comes underneath the left div.

    I have also attached a SS of no borders. Everything else works fine, but these two bad divs. Any ideas? This site is not live yet, I am doing the template on my local machine on my localhost. So I am attaching the CSS and HTML code to look at.

    Thanks in advance. CSS is still a little funky in it's layout, I'm not to the cleaning up part yet, that's after I get it working.

    Code:
    html {
      height: 100%;
      margin-bottom: 1px;
    }
    
    form {
      margin: 0;
      padding: 0;
    }
    
    body {
    	font-family: Helvetica,Arial,sans-serif;
    	line-height: 1.3em;
    	margin: 0px 0px 0px 0px;
    	font-size: 12px;
    	color: #333;
    }
    
    a:link, a:visited {
    	text-decoration: none;
    	font-weight: normal;
    }
    
    a:hover {
    	text-decoration: underline;
    	font-weight: normal;
    }
    
    #topContent .menu {
    	list-style: none;
    	padding-top: 10px;
    	margin-left: -20px;
    	height: 21px;
    }
    
    #topContent .menu a {
    	color: #FFFFFF;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-size: 10px;
    	font-weight: bold;
    }
    
    #topContent .menu li {
    	font-weight: bold;
    	color: #FFFFFF;
    	padding: 5px 0 5px 0;
    	width: 110px;
    	float: left;
    	display:inline;
    	text-align: center;
    	text-decoration: none;
    	background: url(../images/menubut.png) top left no-repeat;
    }
    
    #topContent .menu #current, #topContent .menu li:hover {
    	color: #FFFFFF;
    	padding: 5px 0 5px 0;
    	width: 110px;
    	float: left;
    	display:inline;
    	text-align: center;
    	text-decoration: none;
    	background: url(../images/greenbut.png) top left no-repeat;
    }
    
    #topBar {
    	border: #000 solid 0;
    	height: 284px;
    	width: 100%;
    	background: url(../images/topbar.png) top left no-repeat;
    	margin: 0 auto;
    }
    
    #topWrap {
    	width: 900px; /* 895px */
    	margin: 0 auto;
    }
    
    #rightContent {
    	border: #000 solid 0;
    	display: inline;
    	width: 625px;
    	float: right;
    }
    
    #topContent {
    	border: #000 solid 0;
    	display: block;
    	width: 625px;
    	background: url(../images/topmenubar.png) top left no-repeat;
    	margin: -15px 0 0 0;
    }
    
    #leftLogo {
    	border: #000 solid 0;
    	display: inline;
    	width: 270px;
    	height: 230px;
    	float: left;
    	vertical-align: bottom;
    	padding-top: 50px;
    }
    
    #midContent {
    	border: #000 solid 0;
    	width: 895px;
    	margin: 0 auto;
    	margin-bottom: 10px;
    	display: block;
    }
    
    #botBar {
    	display: block;
    	height: 392px;
    	width: 100%;
    	background: url(../images/botbar.png) top left no-repeat;
    }
    
    #botCon {
    	width: 895px;
    	height: 50px;
    	margin: 0 auto;
    	padding-top: 25px;
    	text-align: center;
    	background-color: #4F4F4F;
    	color: #fff;
    }
    
    #botCon a {
    	color: #008080;
    	text-decoration: none;
    }
    
    #botCont {
    	padding-top: 20px;
    }
    
    #botContent {
    	display: block;
    }
    
    #leftSide {
    	border: #000 solid 0;
    	padding-top: 20px;
    	width: 155px;
    }
    
    #userSide {
    	border: #000 solid 0;
    	margin 0;
    }
    
    #userSide label {
    	color: #000;
    	font-weight: bold;
    	font-size: 10px;
    	text-align: left;
    }
    
    #userSide .inputbox {
    	display: block;
    	background: url(../images/formfield.png) 0 0 no-repeat;
    	width: 145px;
    	height: 21px;
    	border: 0;
    	line-height: 9px;
    	font-size: 9px;
    	padding: 2px 0 0 5px;
    }
    
    #userSide ul {
    	list-style: none;
    	margin-left: -35px;
    }
    
    #userSide li {
    	display: block;
    }
    
    #userSide a {
    	color: #fff;
    	font-weight: bold;
    	text-decoration: none;
    	font-size: 11px;
    }
    
    #userSide a:hover {
    	color: #7DBE34;
    }
    
    #searchSide {
    	border: #000 solid 0;
    	margin 0;
    }
    
    #searchSide .inputbox {
    	display: block;
    	background: url(../images/searchfield.png) 0 0 no-repeat;
    	width: 143px;
    	height: 21px;
    	border: 0;
    	line-height: 9px;
    	font-size: 9px;
    	padding: 13px 0 10px 10px;
    }
    
    #rightSide {
    	border: #000 solid 0;
    	/*position: relative;
    	top: -225px;
    	left: 130px;*/
    	display: inline;
    	float: right;
    }
    
    #smallButs {
    	border: #000 solid 0;
    	height: 180px;
    	width: 460px;
    }
    
    #small1, #small2, #small3 {
    	border: #000 solid 0;
    	display: inline;
    	float: left;
    	width: 150px;
    }
    
    #small2, #small3 {
    	margin-left: -20px;
    }
    
    #smallButs #mainlevel {
    	list-style: none;
    	display: block;
    }
    
    #smallButs #mainlevel a {
    	color: #000;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-size: 12px;
    	font-weight: bold;
    }
    
    #smallButs #mainlevel a:hover {
    	color: #fff;
    	text-decoration: none;
    }
    
    #smallButs #mainlevel img {
    	vertical-align:middle;
    }
    
    #smallButs #mainlevel li {
    	list-style: none;
    	display: block;
    	color: #000;
    	text-align: left;
    	text-decoration: none;
    	padding: 3px 0 3px 0;
    }
    
    #socialIcons {
    	border: #000 solid 0;
    	width: 425px;
    	text-align: right;
    	display: block;
    }
    
    #leftBar {
    	border: #000 solid 0;
    	float: left;
    	width: 200px;
    }
    
    #splitter {
    	border: #000 solid 0;
    	float: left;
    	width: 40px;
    	height: 800px;
    	background: url(../images/line.png) top left no-repeat;
    }
    
    #mainContent {
    	border: #000 solid 0;
    	float: left;
    	width: 645px;
    }
    PHP Code:
    <?php
    // no direct access
    defined'_JEXEC' ) or die( 'Restricted access' );

    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language?>" lang="<?php echo $this->language?>" >
    <head>
    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/bioskinew/css/template.css" type="text/css" />
    </head>
    <body>

    <div id="topBar">
        <div id="topWrap">
            
        <div id="leftLogo">
            <!-- logo goes here -->
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="270" height="230" id="logo" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="false" />
            <param name="movie" value="<?php echo $this->baseurl ?>/templates/bioskinew/logo.swf" />
            <param name="menu" value="false" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="bgcolor" value="#ffffff" />
            <embed src="<?php echo $this->baseurl ?>/templates/bioskinew/logo.swf" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="270" height="230" name="logo" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
            </object>
        </div>
        <div id="rightContent">
            <div id="topContent">
                <!-- Top menu goes here -->
                <jdoc:include type="modules" name="toolbar" />
            </div>
            <div id="botContent">
            <div id="leftSide">
                    <div id="userSide">
                        <!-- user content here -->
                        <jdoc:include type="modules" name="user1" />
                    </div>
                    <div id="searchSide">
                        <!-- search bar here -->
                        <jdoc:include type="modules" name="search" />
                    </div>
                </div>
                <div id="rightSide">
                    <div id="smallButs">
                        <div id="small1">
                            <!-- small menu buttons -->
                            <jdoc:include type="modules" name="user2" />
                        </div>
                        <div id="small2">
                            <!-- small menu buttons -->
                            <!--<jdoc:include type="modules" name="user3" />-->
                        </div>
                        <div id="small3">
                            <!-- small menu buttons -->
                            <!--<jdoc:include type="modules" name="user4" />-->
                        </div>
                    </div>
                    <div id="socialIcons">
                        <!-- social Icons here -->
                        <jdoc:include type="modules" name="user5" />
                    </div>
                </div> <!-- Right Side End -->
            </div> <!-- BotContent End -->
        </div> <!-- rightContent End -->
        
    </div> <!-- topwrap end -->
    </div> <!-- Topbar end -->
    <div style="clear: both;"></div>
    <div id="midContent">
        <div id="leftBar">
            <!-- left bar content here -->
            <jdoc:include type="modules" name="left" />
        </div>
        <div id="splitter"></div>
        <div id="mainContent">
            <!-- main content here -->
            <jdoc:include type="component" />
        </div>
        <div style="clear: both;"></div>
    </div> <!-- end of midcontent -->

    <div id="botBar">
        <div id="botCont">
            <div id="botCon">
                <!-- Bottom content -->
                Dise&ntilde;o y Programmacion por <a href="http://www.microtronix-tech.com" target="_blank">Microtronix</a>
            </div>
        </div>
    </div>

    </body>
    </html>
    Attached Thumbnails Attached Thumbnails DIVS are making me crazy!!-ss1.jpg   DIVS are making me crazy!!-ss2.jpg   DIVS are making me crazy!!-ss3.jpg  
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm too lazy to pull your code into my own test page but if you want both items cozied up on the left, then all you need to do is float them both left or else float the login left and use no float on the right-hand (social link) block.

    Something like this:
    Code:
    #leftSide {
    border:0 solid #000000;
    float:left;
    padding-top:20px;
    width:155px;
    }
    #rightSide {
    border:0 solid #000000;
    float:left;
    }
    You say you have already done something like this, so if your social network block is dropping down below the login then you probably have your widths too wide, forcing the social block to the next "line" down.

    If you put this up on a public server somewhere I could be of more help (remember, we don't even have your images/flash files to use).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    Yeah you see that's what I thought. I floated both left and cleared after just to make sure. But when I do that then the screenshot 2 happens and I get stuck. Let me try with the widths again, I had tried this last night but maybe I missed something, I don't even think I have widths in it anymore, I think I removed the right ones width and left the left one at 155, which according to the top div should be enough.

    But I will try again and see what I get.

    The problem is to be able to put this up on the server in it's full grandeur I have to add some personal modified components and such and I just wasn't ready yet. But I will try widths if not I will launch and let you see a full one.

    Thanks.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well you did have display:inline; in the right-hand CSS, which I removed when posting the suggestion. Make sure that you remove it when you test also or else the width setting will have no meaning anyway (if you give it a width).

    As for posting the live page, could you just pull the processed HTML and your image/flash resources and thoss them up on a public server to avoid posting the entire site?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    Nop no go, just tried the width after removing the inline thing and still like second image.

    At any rate I went ahead and published it to the live site:

    http://www.bioskinew.com/index.php

    Thanks for the help. This right now the one I have up is the original CSS before the changes.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    This worked for me in FF3.5:
    Code:
    #leftSide {
    border:0 solid #000000;
    float:left;
    padding-top:20px;
    width:160px;
    }
    #rightSide {
    border:0 solid #000000;
    margin-left:160px;
    }
    I used no float and set margin-left on the #rightSide container. I set that margin equal to the width of the #leftSide container (plus left/right padding and margins, which were zero in this case), but if the login will fluctuate in width you could just as easily use float:left; and no margin at all on that right-hand container.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    jfreak53 (05-04-2010)

  • #7
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    Your da MAN. I seriously tried that last night and I could have swared that it didn't work. Brain farts, man they hurt.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    No worries, we've all been there.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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