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?
Float: Right two divs, one above the other - HOW?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Float: Right two divs, one above the other - HOW?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Float: Right two divs, one above the other - HOW?
Have you tried clearing your floats?
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Float: Right two divs, one above the other - HOW?
as in <div style='clear: both' /> ?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: Float: Right two divs, one above the other - HOW?
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
html
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;
}
Code: Select all
<div id="container" >
<div class="left" >Left</div>
<div class="right" >Right</div>
</div>
<div class="right2" >Right</div>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Float: Right two divs, one above the other - HOW?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Float: Right two divs, one above the other - HOW?
Of course you can.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.
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>