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 7 of 7
  1. #1
    Dyl
    Dyl is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    21
    Thanks
    0
    Thanked 1 Time in 1 Post

    floating divs inside a div

    Ok I have a repeating layout that repeats along the Y axis. I have the header, then the repeating image, then the content so it extends the repeating image for however much you type, and then the footer.
    The problem is, I have TWO divs inside that content div. And one belongs on the left side for the navigation and the other belongs on the right side for the content. But they aren't staying inside the content div whenever I float them to the left so it's not extending the layout. Whenever I dont float them to the left, the stay inside the content div.
    Here is my HTML code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Elvonica Layout</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="wrapper">
    	<div id="topnavigation">
    		<div class="topnav">
    			<a href="#">HOME</a> - <a href="#">EXPLORE</a> - <a href="#">GAMES</a> - <a href="#">FORUMS</a> - <a href="#">NEWS</a>
    		</div>
    	</div>
    	<div class="top"></div>
    		<div class="mid">
    			<div class="content">
    				<div class="left">
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    					<a href="#">LINK</a><br />
    				</div>
    				<div class="right">
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    					<p>Black pandas are coming to attack me. Oh noooooooooooooooooooooooooooooooooooo!!! RUN AWAY! HURRY! WITH FURY! I KNOW IM SUCH A RETARD TALKING TO MYSELF. Why do I always act goofy when I code? Seriously... Maybe I should go get this checked out. xD</p>
    				</div>
    			</div>
    		</div>
    	<div class="bottom"></div>
    </div>
    </body>
    </html>
    And then here is my css code:
    Code:
    * { margin:0; padding:0; }
    
    body {
    	background: #353831;
    	margin: auto;
    	font-family: Tahoma, Arial, sans-serif;
    	color: #102226;
    	font-size: small;
    }
    	
    #wrapper {
    	width: 1000px;
    	height: auto;
    	margin: auto;
    }
    
    #wrapper .top {
    	background: #353831 url('header.png') no-repeat;
    	width: 1000px;
    	height: 302px;
    }
    
    #wrapper .mid {
    	background: #353831 url('mid.png') repeat-y;
    	width: 1000px;
    }
    
    #wrapper .bottom {
    	background: #353831 url('footer.png') no-repeat;
    	width: 1000px;
    	height: 188px;
    }
    
    #wrapper .content {
    	position: relative;
    	left: 78px;
    	width: 880px;
    	height: auto;
    	border: 1px solid #000;
    }
    
    #wrapper .content .left {
    	border: 1px solid #000;
    	float: left;
    	width: 146px;
    	height: auto;
    }
    
    #wrapper .content .right {
    	border: 1px solid #000;
    	float: left;
    	width: 708px;
    	height: auto;
    	margin-left: 15px;
    }
    
    #topnavigation {
    	position: absolute;
    	width: 1000px;
    	height: 36px;
    	margin: auto;
    }
    
    .topnav {
    	position: absolute;
    	top: 248px;
    	font-size: large;
    	text-align: center;
    	letter-spacing: 2px;
    	left: 100px;
    	width: 806px;
    	height: 36px;
    }
    
    #sidenavigation {
    	position: absolute;
    	width: 1000px;
    	height: auto;
    	margin: auto;
    	border: 1px solid #000;
    }
    
    .sidenav {
    	position: absolute;
    	top: 299px;
    	font-size: medium;
    	text-align: left;
    	letter-spacing: 2px;
    	left: 78px;
    	width: 146px;
    	height: auto;
    }
    I hope someone can help me figure this out.
    Here is a screenshot of what is happening to the layout:
    http://i370.photobucket.com/albums/o...Mug/messup.png

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try using a clearfix

    delete the height for content

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    Code:
    <div class="clearfix">
     <div class="left"></div>
     <div class="right"></div>
    </div>
    clearfix is known as a "hack" more than anything. Your using height: auto, so clearfix would be ideal here.
    Last edited by Sammy12; 07-09-2011 at 08:38 PM.

  • #3
    Dyl
    Dyl is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    21
    Thanks
    0
    Thanked 1 Time in 1 Post
    What do you mean by a clearfix?
    How would I do that?

    And I tried deleting the height of the content. It still doesn't work.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    clearfix is a "hack" for clearing floats with an indefinite height. you set the clearfix to the container of the two (or more) floats.

  • #5
    Dyl
    Dyl is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    21
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ah thank you sooo much Sammy! (:

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    did it work? There are a lot of ways to fix the problem you specified

  • #7
    Dyl
    Dyl is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    21
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yes it worked like a charm. (:


  •  

    Posting Permissions

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