Skip to main content

How to float items next to each other but aligned to the right

Submitted by helen on Tuesday, October 25, 2011 - 13:56; Modified on Thursday, August 25, 2016 - 15:25

So you have a several elements as part of your well-formed and well-written website but your problem is that you want them to sit next to each other, but floated to the right? The solution for this depends on whether you're using inline or block elements. Let's have a look at some practical examples.

The block layout

Example of what our layout looks like before the fancy CSS magic begins

We have four divs inside a container that we want to float next to each other. The logical approach is to float them left, so we give each div a float:left:

CSS Code:


#myContainer1{
	width:100%;
	border:1px solid #F66;
	background:#FCC;
	overflow:auto;
	height:100%;
}

#myContainer1 .blockOne, #myContainer1 .blockTwo, #myContainer1 .blockThree, #myContainer1 .blockFour {
	width:50px;
	height:50px; 
	float:left;
}

.blockOne {
	background:#C6F;
}

.blockTwo {
	background:#699;
}

.blockThree {
	background:#CC9;

}
			
.blockFour {
	background:#C99;
}

Note — we are applying overflow:auto and height:100% (for IE) to our container div myContainerStart to combat float leakage. If you've never heard of this approach before, visit How to combat float leakage and How to make an element stretch to fit its contents.

(X)HTML Code:


<div="myContainer1">
	<div class="blockOne">Block One</div>
	<div class="blockTwo">Block Two</div>
	<div class="blockThree">Block Three</div>
	<div class="blockFour">Block Four</div>
</div>

Result:

Block One
Block Two
Block Three
Block Four

As you can see, our boxes may well be floated, but to the left, which is not what we want.

Solution #1

The first solution is to use float:right on the boxes and switch their order around. This feels like a bit of a hack to me, but it's a plausible solution for those who don't mind reordering their elements. The reason we have to reorder our elements is because float:right will float elements to the right of each other, so your first element will end up on the far right, your second element will be placed to the left of that, your third element to the left of that, etc; it's the opposite of float:left.

CSS Code:


#myContainer2 {
	width:100%;
	border:1px solid #F66;
	background:#FCC;
	overflow:auto;
	height:100%;
}

#myContainer2 .blockOne, #myContainer2 .blockTwo, #myContainer2 .blockThree, #myContainer2 .blockFour {
	width:50px;
	height:50px; 
	float:right;
}

.blockOne {
	background:#C6F;
}

.blockTwo {
	background:#699;
}

.blockThree {
	background:#CC9;
}

.blockFour {
	background:#C99;
}

(X)HTML Code:


<div="myContainer2">
	<div class="blockFour">Block Four</div>
	<div class="blockThree">Block Three</div>
	<div class="blockTwo">Block Two</div>
	<div class="blockOne">Block One</div> 
</div>

Result:

Block Four
Block Three
Block Two
Block One

Solution #2

The second solution is to use a wrapper div around your elements, float it to the right and give it a combined width of the elements inside and any margin, padding and borders applied to them. This only works if the elements you want to align to the right of your container have set widths — that is, a width that has a non-zero value. If you give the wrapper a set width and not the elements inside it, there is a chance, the elements may drop to a new line under certain conditions (browsing medium, screen width, zoom level, etc).

CSS Code:


#myContainer3 {
	width:100%;
	border:1px solid #F66;
	background:#FCC;
	overflow:auto;
	height:100%;
}

#wrapper {
	width:200px;
	float:right; 
}

#myContainer3 .blockOne, #myContainer3 .blockTwo, #myContainer3 .blockThree, #myContainer3 .blockFour {
	width:50px;
	height:50px; 
	float:left;
}

.blockOne {
	background:#C6F;
}

.blockTwo {
	background:#699;
}

.blockThree {
	background:#CC9;
}

.blockFour {
	background:#C99;
}

(X)HTML Code:


<div="myContainer3">
	<div="wrapper">
		<div class="blockOne">Block One</div>
		<div class="blockTwo">Block Two</div>
		<div class="blockThree">Block Three</div>
		<div class="blockFour">Block Four</div>
	</div>
</div>

Result:

Block One
Block Two
Block Three
Block Four

The inline layout

With inline elements, the approach is simpler than with block elements. Inline elements are part of the flow of the page, so all you need to do is align them to the right by adding text-align:right to the container.

Example

CSS Code:


#myList {
	background:#CF9;
	margin:0;
	padding:0;
	text-align:right;
    color:#fff;
}

#myList li {
	display:inline;
	background:#96C;
}

(X)HTML Code:


<ul="myList">
	<li>Item One</li>
	<li>Item Two</li>
	<li>Item Three</li>
	<li>Item Four</li>
</ul>

Result:

  • Item One
  • Item Two
  • Item Three
  • Item Four

What if I want to apply margins or padding to the top of my list items?

The short answer is, you can't. Inline elements won't render top or bottom margins or padding. The margins and padding will actually be present on the page (if you use the Firefox Firebug add-on and inspect the element, you can see them) but they won't appear as part of the flow of the page. To get round this, the easiest option is to give your list a top and bottom padding, which will create the space you desire.

This may work fine for you, but if you have a left or right border on your inline items, the gap applied to their parent may not be in the right place for you — you might want the borders to reach seamlessly down from the top to the bottom of the container. If this is the case, the best approach is to convert your inline elements to block elements (just remove the display:inline, if you're using list items), give them a padding and float them.