PDA

View Full Version : Float problem.



apotd
Dec 31st, 2011, 12:51 AM
Hi,

I just want the div "right" next to my div "left", but I can't seem to get it to work. The float confuses me every time.

HTML



<body>

<div id="container">

<header>
</header>

<div id="content">

<nav>
<a href="#" alt="djkdjk">Link 1</a>
<a href="#" alt="djkdjk">Link 2</a>
<a href="#" alt="djkdjk">Link 3</a>
<a href="#" alt="djkdjk">Link 4</a>
<a href="#" alt="djkdjk">Link 5</a>
</nav>

<div id="textcontent">

<div id="left">
<div class="textblocklefttitle">
title
</div>
<div class="textblockleft">
Pellentesque quis ipsum ac odio hendrerit venenatis vel vel justo.
</div>

<div class="textblocklefttitle">
title
</div>
<div class="textblockleft">
Aenean non mi ante. Nam a mauris varius leo faucibus fringilla.
</div>
</div>

<div id="right">
<div class="textblockrighttitle">
title
</div>
<div class="textblockright">
Pellentesque quis ipsum ac odio hendrerit venenatis vel vel justo.
</div>
</div>

</div>

</div>

<footer>
</footer>

</div>

</body>



CSS:


body{
background: url('../images/pagebackground.gif');
margin: 0;
padding: 0;
}

header{
background: url('../images/headerfooter.png');
height: 22px;
width: 927px;
margin: 40px auto 0 auto;
}

#content{
background: url('../images/contentbackground.gif');
width: 927px;
margin: 0 auto;
}

nav{
width: 883px;
height: 100px;
text-align: center;
margin: 0 auto;
}

#textcontent{
width: 812px;
margin: 0 auto;
}

#left{
width: 560px;
}

#right{
width: 280px;
float: left;
}

.textblocklefttitle{
width: 560px;
height: 42px;
background: #fbfbfb;
text-align: right;
}

.textblockleft{
width: 560px;
background: #ffffff;
margin: 0 10px 26px 0;
}

.textblockrighttitle{
width: 208px;
height: 42px;
background: #fbfbfb;
text-align: right;
}

.textblockright{
width: 208px;
background: #ffffff;
}

footer{
background: url('../images/headerfooter.png');
height: 22px;
width: 927px;
margin: 0 auto;
clear: both;
}

teedoff
Dec 31st, 2011, 01:04 AM
The order of your divs in the markup are inportant when floating elements.

Your right div is socend in your markup yet you float it left.

Try removing the float on the right div, floating the left div instead, remembering to clear your floats if needed.

apotd
Dec 31st, 2011, 01:13 AM
I tried removing the float on the right div and giving the left div the float, but this doesn't work either. I cleared the float for the footer already.

Excavator
Dec 31st, 2011, 01:24 AM
Hello apotd,
There is more than just the order of your floats causing the drop. You have ignored the box model completely. See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

You have 812px wide #textcontent holding 560px wide #left and 280px wide #right. Together those two elements add up to more than the width of #textcontent.

Try something like this instead, just to start with - you'll have more work to get it the way you want...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
body { background: url('../images/pagebackground.gif'); }
/* HTML5 tags */
header, section, footer, aside, nav, article, figure { display: block; }
header {
background: url('../images/headerfooter.png');
height: 22px;
width: 927px;
margin: 40px auto 0 auto;
}
#content {
background: url('../images/contentbackground.gif');
width: 927px;
margin: 0 auto;
}
nav {
width: 883px;
height: 100px;
text-align: center;
margin: 0 auto;
}
#textcontent {
width: 840px;
margin: 0 auto;
overflow: auto;
}
#left {
width: 560px;
float: left;
}
#right {
width: 280px;
margin: 0 0 0 560px;
}
.textblocklefttitle {
width: 560px;
height: 42px;
background: #fbfbfb;
text-align: right;
}
.textblockleft {
width: 560px;
background: #ffffff;
margin: 0 10px 26px 0;
}
.textblockrighttitle {
width: 208px;
height: 42px;
background: #fbfbfb;
text-align: right;
}
.textblockright {
width: 208px;
background: #ffffff;
}
footer {
background: url('../images/headerfooter.png');
height: 22px;
width: 927px;
margin: 0 auto;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<header>
</header>
<div id="content">
<nav>
<a href="#" alt="djkdjk">Link 1</a>
<a href="#" alt="djkdjk">Link 2</a>
<a href="#" alt="djkdjk">Link 3</a>
<a href="#" alt="djkdjk">Link 4</a>
<a href="#" alt="djkdjk">Link 5</a>
</nav>
<div id="textcontent">
<div id="left">
<div class="textblocklefttitle">
title
</div>
<div class="textblockleft">
Pellentesque quis ipsum ac odio hendrerit venenatis vel vel justo.
</div>

<div class="textblocklefttitle">
title
</div>
<div class="textblockleft">
Aenean non mi ante. Nam a mauris varius leo faucibus fringilla.
</div>
</div>
<div id="right">
<div class="textblockrighttitle">
title
</div>
<div class="textblockright">
Pellentesque quis ipsum ac odio hendrerit venenatis vel vel justo.
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>

apotd
Dec 31st, 2011, 01:34 AM
Oh, my bad. I didn't think about that. But now the total width of the left and right div are not bigger than the textcontent div anymore, what are the things I still need to edit to make it work? My divs still aren't next to each other. I actually really don't have a clue.

Excavator
Dec 31st, 2011, 01:44 AM
what are the things I still need to edit to make it work? My divs still aren't next to each other. I actually really don't have a clue.


It's very difficult to tell why your left/right are not side by side since I don't know what your current code looks like. For all I know, you might have completely ignored my entire post except for the box model sentence.
Can you put your updated code on a test site for us? You are going to need to test online sooner or later anyway.

Did you try the example I quoted? That puts your left/right beside each other but you will still need to add padding and any borders/corners/whatever to suit your needs.

apotd
Dec 31st, 2011, 01:51 AM
I see, you're right, I forgot the "margin: 0 0 0 560px;" at the right div. It works now, but I don't really understand why I have to put such a huge margin of the same size of the left div. So the right div doesn't actually really float but is just placed right because of the margin or what?

Excavator
Dec 31st, 2011, 02:09 AM
I see, you're right, I forgot the "margin: 0 0 0 560px;" at the right div. It works now, but I don't really understand why I have to put such a huge margin of the same size of the left div. So the right div doesn't actually really float but is just placed right because of the margin or what?

Look at my example of a simple 2-column layout here (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

You don't have to do it that way, you can float both left and right if you like. Some browsers will mess that up but they are older...most (all?) modern browsers have solved that problem I think.

apotd
Jan 1st, 2012, 05:20 PM
Okay, thank you!