Float: Right two divs, one above the other - HOW?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
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?

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Float: Right two divs, one above the other - HOW?

Post by Celauran »

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?

Post by simonmlewis »

as in <div style='clear: both' /> ?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
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?

Post 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>
“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?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Float: Right two divs, one above the other - HOW?

Post 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>
Post Reply