...

View Full Version : floating divs inside a div



Dyl
07-09-2011, 06:44 PM
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:

<!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:

* { 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/oo149/TenaciousMug/messup.png

Sammy12
07-09-2011, 08:33 PM
try using a clearfix

delete the height for content



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}



<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.

Dyl
07-09-2011, 08:35 PM
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.

Sammy12
07-09-2011, 08:39 PM
clearfix is a "hack" for clearing floats with an indefinite height. you set the clearfix to the container of the two (or more) floats.

Dyl
07-09-2011, 09:05 PM
Ah thank you sooo much Sammy! (:

Sammy12
07-09-2011, 09:06 PM
did it work? There are a lot of ways to fix the problem you specified

Dyl
07-09-2011, 09:47 PM
Yes it worked like a charm. (:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum