Published on: 11 August, 2013

CSS Float

Posted by andy | 1099 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

CSS Float element allows you to position an element to the left or right. See two examples below with one element of image float to left and the next example is float to the right.

Float the image to the left

This is a quick demo on how to float the image to left.

sample image float using css Conviluis ruti dictio adipi hacio ani palti dea sub fremen sotpio sito etui timoi acio ultri hatibo nuni duo vali eua fringala velizu donio vitael congi orai egetsi sipoi menecoi sagita semperi vuliputu scelerisu uloe telli augue estelio lorit dicti sceleris palvinor mekuai telei doi frinuilo nequex goi curiosue scelosqui pharetu ratrum aeni moriol dignisa comodi masie sito sito buis solicto famera pele gulio ultrico muis gravido idu lacui gujial ticoduy velo solicito sondue nequel. Sapio pesetaie malesudi pharetu ememper velio egetsi uto donio eua lopiun

Float the image to the right

This is a quick demo on how to float the image to the right.

sample image float using css Conviluis ruti dictio adipi hacio ani palti dea sub fremen sotpio sito etui timoi acio ultri hatibo nuni duo vali eua fringala velizu donio vitael congi orai egetsi sipoi menecoi sagita semperi vuliputu scelerisu uloe telli augue estelio lorit dicti sceleris palvinor mekuai telei doi frinuilo nequex goi curiosue scelosqui pharetu ratrum aeni moriol dignisa comodi masie sito sito buis solicto famera pele gulio ultrico muis gravido idu lacui gujial ticoduy velo solicito sondue nequel. Sapio pesetaie malesudi pharetu ememper velio egetsi uto donio eua

 

Float two images to the left and right

This is a quick demo on how to float the images to left and right.

sample image float using css sample image float using cssConviluis ruti dictio adipi hacio ani palti dea sub fremen sotpio sito etui timoi acio ultri hatibo nuni duo vali eua fringala velizu donio vitael congi orai egetsi sipoi menecoi sagita semperi vuliputu scelerisu uloe telli augue estelio lorit dicti sceleris palvinor mekuai telei doi frinuilo nequex goi curiosue scelosqui pharetu ratrum aeni moriol dignisa comodi masie sito sito buis solicto famera pele gulio ultrico muis gravido idu lacui gujial ticoduy velo solicito sondue nequel. Sapio pesetaie malesudi pharetu ememper velio egetsi uto donio eua lopiun curiosue risusu idu velo sito gulio sipoi diami timoi gravido facilisoe inim ultri duo solicto pras duiso ani dulia fremen sondue at

If you see carefully on the html code you will notice, although the text content is placed after the images, the last image will keep float to right and the content of the text will just keep flow to the first element on the left.

<p>This is a quick demo on how to float the image to left.</p>
<div class="demobox">
	<p> <img src="/css/images/desert.jpg" class="floatleft" alt="sample image float using css"/> Conviluis ruti dictio adipi hacio ani palti dea sub fremen sotpio sito etui timoi acio ultri hatibo nuni duo vali eua fringala velizu donio vitael congi orai egetsi sipoi menecoi sagita semperi vuliputu scelerisu uloe telli augue estelio lorit dicti sceleris palvinor mekuai telei doi frinuilo nequex goi curiosue scelosqui pharetu ratrum aeni moriol dignisa comodi masie sito sito buis solicto famera pele gulio ultrico muis gravido idu lacui gujial ticoduy velo solicito sondue nequel. Sapio pesetaie malesudi pharetu ememper velio egetsi uto donio eua lopiun</p>
</div>


<p>This is a quick demo on how to float the image to the right.</p>
<div class="demobox">
	<p> <img src="/css/images/desert.jpg" class="floatright" alt="sample image float using css"/> Conviluis ruti dictio adipi hacio ani palti dea sub fremen sotpio sito etui timoi acio ultri hatibo nuni duo vali eua fringala velizu donio vitael congi orai egetsi sipoi menecoi sagita semperi vuliputu scelerisu uloe telli augue estelio lorit dicti sceleris palvinor mekuai telei doi frinuilo nequex goi curiosue scelosqui pharetu ratrum aeni moriol dignisa comodi masie sito sito buis solicto famera pele gulio ultrico muis gravido idu lacui gujial ticoduy velo solicito sondue nequel. Sapio pesetaie malesudi pharetu ememper velio egetsi uto donio eua</p>
</div>

<p>This is a quick demo on how to float the images to left and right.</p>
<div class="demobox">
	<p> <img src="/css/images/desert.jpg" class="floatleft" alt="sample image float using css"/>  <img src="/css/images/desert.jpg" class="floatright" alt="sample image float using css"/>Conviluis ruti dictio adipi hacio ani palti dea sub fremen sotpio sito etui timoi acio ultri hatibo nuni duo vali eua fringala velizu donio vitael congi orai egetsi sipoi menecoi sagita semperi vuliputu scelerisu uloe telli augue estelio lorit dicti sceleris palvinor mekuai telei doi frinuilo nequex goi curiosue scelosqui pharetu ratrum aeni moriol dignisa comodi masie sito sito buis solicto famera pele gulio ultrico muis gravido idu lacui gujial ticoduy velo solicito sondue nequel. Sapio pesetaie malesudi pharetu ememper velio egetsi uto donio eua lopiun curiosue risusu idu velo sito gulio sipoi diami timoi gravido facilisoe inim ultri duo solicto pras duiso ani dulia fremen sondue at</p>
</div>


<style type="text/css">
	.demobox{
		width:600px;
		margin-bottom:10px;
		border:solid 1px #ccc;
		padding:10px;
	}
	
	.floatleft{
		float:left;
		padding:10px;
	}
	
	.floatright{
		float:right;
		padding:10px;
	}
</style>

Another Demo using Float element in the horizontal menu.

If you see carefully below example, the menu is positioned vertically. In the next step, we will float the menu to the left by using css. So you know how it works.

 

You can view the html source below:

<style type="text/css">

	ul.uldemo, ul.uldemo li{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	ul.uldemo li{
		background:#3CF;
		border:solid 1px #ffffff;
		width:80px;
		padding:5px 10px;
                float:left;
	}
	
	ul.uldemo li a{
		text-decoration:none;
		color:#ffffff;
	}
	
	.clear{
		clear:both;
	}

        ul.uldemo{
               width:100%;
        }
</style>

<ul class="uldemo">
	<li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
</ul>

After we apply the float to the left, the menu will be looks like this.

 
/* see the new added css and class into the ul attribute tag. */
ul.uldemoafter li{
	float:left;
}

/* see we add the class uldemoafter. */
<ul class="uldemo uldemoafter">
	<li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
</ul>

Remember when you are using the float, you have to clear the floating element after use, otherwise the next element will get the same effect as well. See below example:

Example Float with no clear float element.

See this bold text should be floated to the left as well.

To overcome above situation, you can use just the following css to clear the float.

.clear{
    clear:both;
}

You can apply above class to a div or to the next element if you want. For ex:

<div class="clear"></div>
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.