Page 1 of 1
Float: Right two divs, one above the other - HOW?
Posted: Thu Sep 27, 2012 7:15 am
by simonmlewis
I have a layout of a box floating left, and one floating right.
Works perfect.
But now I need to put another box below the right one. If I use the same box class as the one already on the right, it just goes wrong, but pushing the right one to the left.
How do you do it?
Re: Float: Right two divs, one above the other - HOW?
Posted: Thu Sep 27, 2012 8:46 am
by Celauran
Have you tried clearing your floats?
Re: Float: Right two divs, one above the other - HOW?
Posted: Thu Sep 27, 2012 8:49 am
by simonmlewis
as in <div style='clear: both' /> ?
Re: Float: Right two divs, one above the other - HOW?
Posted: Thu Sep 27, 2012 8:56 am
by social_experiment
If you're using a wrapper (div#container in my code) to house the floating elements you can place the second right float outside that wrapper.
css
Code: Select all
#container:after {
display: block;
content: '';
clear: both;
}
.left {
float: left;
background-color: #585858;
}
.right {
float: right;
background-color: #999;
}
.right2 {
float: right;
background-color: #333;
}
html
Code: Select all
<div id="container" >
<div class="left" >Left</div>
<div class="right" >Right</div>
</div>
<div class="right2" >Right</div>
Re: Float: Right two divs, one above the other - HOW?
Posted: Thu Sep 27, 2012 8:59 am
by simonmlewis
I've decided how to do it - basically what you've said.
A float box on the left.
A float box 'container' on the right.
Inside that right box, put the two boxes on top of each other.
Just wish you could have just the THREE boxes. Float two on the right which go on top of each other. Seems you can't.
Re: Float: Right two divs, one above the other - HOW?
Posted: Thu Sep 27, 2012 9:40 am
by Celauran
simonmlewis wrote:Just wish you could have just the THREE boxes. Float two on the right which go on top of each other. Seems you can't.
Of course you can.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#topLeft {
height: 200px;
width: 200px;
float: left;
background-color: #F00;
}
#topRight {
height: 200px;
width: 200px;
float: right;
background-color: #0F0;
}
#nextRight {
height: 200px;
width: 200px;
background-color: #00F;
clear: both;
float: right;
}
</style>
</head>
<body>
<div id="topLeft"></div>
<div id="topRight"></div>
<div id="nextRight"></div>
</body>
</html>