#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    1
    Rep Power
    0

    Floating div being pushed down by other floating div?


    Erm.. I have no idea how to word this question. Usually I can google and figure it out but without knowing what to do google, it isn't going well. So any help would be hugely appreciated!

    Basically I'm having issues where my footer is being pushed down by my sidebar. Both are floating divs.

    This is what it currently looks like:
    zombied.me/images/zrk/current(dot)jpg

    And this is a crude photoshop of what I'm trying to achieve:
    zombied.me/images/zrk/wanted(dot)jpg

    The code isn't too long and I'm honestly not even sure which bit is causing the issue, so I'll just throw it all up;
    Code:
    <!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">
        <head>
            <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary}  {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <!--
    Tumblr theme created by Wanda (Zr) Scott for use on Zrkonium.net
    It was really hard to make
    It took a long time
    Please credit if you want to steal it
    thanks!
     -->
    
            <link rel="shortcut icon" href="{Favicon}" />
            <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
    
            <!-- HTML5 Shiv -->
            <!--[if lt IE 9]>
                    <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
            <![endif]-->
    
            <!-- Reset CSS -->
            <link rel="stylesheet" href="http://static.tumblr.com/thpaaos/****lyl4z/reset.css" type="text/css" />
    
            <!-- Theme CSS -->
            <style type="text/css" media="screen">
                body {
                    background-color:#313131;
                    font-family: Tahoma;
                    font-size:12px;
    				background-image:url('http://zombied.me/images/zrk/background-1.jpg');
    				background-repeat:no-repeat;
    				background-position: top left;
    				background-attachment: fixed;
                }
                
                a:link, a:visited {
                    color:#e825ea;
                    text-decoration:none;
                }
                
                a:hover {
                    color:#f0af47;
                    text-decoration:none;
                }
                
    
                
                /* fonts */
                @font-face {
                    font-family: "photo";
                    src: url('http://zombied.me/images/zrk/ThrowMyHandsUpintheAir.ttf');
                }
                
                @font-face {
                    font-family: "title";
                    src: url('http://zombied.me/images/zrk/big_noodle_titling.ttf');
                }
                
                
                
                /* headersd */
                h2 {
                    font-family: title;
                    font-size:30px;
                    color:#000;
    				background-repeat: no-repeat;
    				background-position: left center;
    				padding-left: 35px;
                }
                
                h2 a:link, h2 a:visited {
                    color:#000;
                    text-decoration: none;
                }
                
                
    			/* layout properties */
    			#page {
    				margin: 10px 0px 10px 20px;
    				width: 1050px;
    				overflow: hidden;
    			}
    			
    			#content {
    				float:left;
    				background-color:#f7f7f7;
    				width: 650px;
    				padding: 20px;
    			}
    			
    			#sidebar {
    				float: left;
    				background-color:#bdbdbd;
    				width: 200px;
    				margin: 100px 105px 0px 0px;
    			}
    			
    			#footer {
    				float: left;
    				margin-left: 305px;
    				background-color:#636363;
    				width: 650px;
    				padding: 20px;
    				color:#1d1d1d;
    				overflow: hidden;
    			}
    			
    			#footer-left {
    				float: left;
    				width: 33%;
    			}
    			
    			#footer-middle {
    				float: left;
    				width: 33%;
    			}
    			
    			#footer-right {
    				float: right;
    				width: 33%;
    			}
    			
    			
    			
    			/* navigation oh god this is going to be awful please don't look at this its bad coding sorry */
    			
    			.sidebar-link1 {
    				color:#fff;
    				background-color:#626262;
    				text-align:center;
    				font-family: Orator Std;
    				font-size: 15px;
    				padding: 3px;
    			}
    			
    			.sidebar-link2 {
    				color:#fff;
    				background-color:#848484;
    				text-align:center;
    				font-family: Orator Std;
    				font-size: 15px;
    				padding: 3px;
    			}
    			
    			
    			
    			/* all posts */
    			.date {
    				color:#505050;
    				font-size: 10px;
    				padding-left: 5px;
    			}
    			
    			.tags {
    				background-color:#505050;
    				color:#e5e5e5;
    				font-size: 10px;
    				padding: 5px;
    				text-align: right;
    				margin: 5px 0px 5px 0px;
    			}
    			
    			.post {
    				padding: 5px;
    			}
    			
    			
    			/* particular posts */
    			.textpost {
    				background-color:#fff;
    				padding: 5px;
    			}
    
            </style>
            
        </head>
        <body>
     
     <div id="page">
     
     <!-- Badly coded sidebar -->
     	<div id="sidebar">
    	<img src="http://zombied.me/images/zrk/avatar.png" alt="avatar" />
    		<div class="sidebar-link1">Link 1</div>
    		<div class="sidebar-link2">Link 2</div>
    	</div>
     <!-- end sidebar -->
     
    
     
     <!-- Badly coded post templates -->
    
    	<div id="content">
    	
    	<!-- text post -->
    		<div class="textpost">
    			<h2 style="background-image:url('http://zombied.me/images/zrk/icon-text.png');">Text Post</h2>
    			<span class="date">September 4th 2013 | 0 Notes</span><br />
    			<p class="post">
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id augue malesuada, pretium orci sed, laoreet odio. Suspendisse potenti. Donec lorem nisi, rutrum eu fermentum at, malesuada ac arcu. Fusce eleifend, velit quis commodo posuere, leo felis lacinia dui, nec porta nibh neque in sem. Aliquam accumsan dui nunc, vel laoreet nisi commodo ut. Maecenas pellentesque ultrices magna id ultricies. Integer venenatis vel lorem vel ornare. Maecenas suscipit pellentesque risus, dictum tincidunt diam pretium eget. Nulla facilisi. Duis a eleifend ante. Suspendisse potenti. Sed non velit quam. Mauris in aliquam ante, a vulputate dui. Suspendisse ut tortor tortor. Etiam eu libero id magna porta lacinia sed non purus.
    			</p>
    			<div class="tags">#tag #tag two #tags and stuff</div>
    		</div>
    	<!-- end text post -->
    		
    	</div>
    	
    
    	
    	
    <!-- Decently coded footer -->
    	<div id="footer">
    		<div id="footer-left">
    			Content &copy; year(s) to respective owners.
    		</div>
    		
    		<div id="footer-middle">
    			Middle footer....
    		</div>
    		
    		<div id="footer-right">
    			Footer links!
    		</div>
    	</div>
    <!-- end footer -->
     </div>
     
        </body>
    </html>
    I feel like it's probably something super simple that I'm missing or did wrong, but I just can't figure out what it is. It's displaying the same in both Chrome and IE10.

    Any thoughts?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    If I was doing this, I'd put a "containing" DIV around the #content and #footer DIVs to enclose them together. Give it a width of 670px (current width + padding of existing #content/#footer), then, float it left if needed, and re-adjust the #content/#footer CSS [margins and such] to compensate for the new "enclosure" they would now be in.

IMN logo majestic logo threadwatch logo seochat tools logo