Css Float Advanced

If You have learnt about basic css float property in css float property  article. Than it is possible for you to learn this article. At first I will show you about image gallery than horizontal menu and than a homepage by float property of css.

A image gallery by css float :

By the help of following syntax you can make a simple image gallery by css float property. You have learnt about the works of css float property in css float property article.

Example:

<html>
<head>
<style type="text/css">
.image
{float:left;
width:110px;
height:90px;
margin:5px;}
.text
{clear:both;
margin-bottom:2px;}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<h3>First row</h3>
<p>Look at this example , this is a simple image gallery.</p>
<img src="http://h2cweb.net/demo/float/yoga1.jpg" width="150" height="100">
<img src="http://h2cweb.net/demo/float/yoga2.jpg" width="150" height="100">
<img src="http://h2cweb.net/demo/float/yoga3.jpg" width="150" height="100">
<img src="http://h2cweb.net/demo/float/yoga4.jpg" width="150" height="100">
<h3>Second row</h3>
<img src="http://h2cweb.net/demo/float/yoga1.jpg" width="150" height="100">
<img src="http://h2cweb.net/demo/float/yoga2.jpg" width="150" height="100">
<img src="http://h2cweb.net/demo/float/yoga3.jpg" width="150" height="100">
<img src="http://h2cweb.net/demo/float/yoga4.jpg" width="150" height="100">
</body>
</html>

 Output:css float image gallery

 

 Horizontal menu by css float:

Css float is very necessary for making horizontal menu. Without the float property , the text of horizontal menu can not be fixed. Follow the following syntax.

Example:

<html>

<head>

<style type="text/css">

ul

{float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;}

a

{float:left;

width:6em;

text-decoration:none;

color:yellow;

background-color:blue;

padding:0.2em 0.6em;

border-right:2px solid white;}

a:hover {background-color:#ff3300;}

li {display:inline;}

</style>

</head>

<body>

<ul>

<li><a href="#">L one</a></li>

<li><a href="#">L two</a></li>

<li><a href="#">L three</a></li>

<li><a href="#">L four</a></li>

</ul>

</body>

</html>

 Output:css float horizontal menu

A homepage by css float:

Here I am going to show you how to make a homepage without table tag of html.  Look at the following syntax for learn about how to make basic and simple homepage.

Example:

<html>

<head>

<style type="text/css">

div.container

{width:100%;

margin:0px;

border:1px solid #c2b4d8;

line-height:150%;}

div.header,div.footer

{padding:0.5em;

color:#19421f;

background-color:#c2b4d8;

clear:left;}

h1.header

{padding:0;

margin:0;}

div.left

{float:left;

width:160px;

margin:0;

padding:1em;}

div.content

{margin-left:190px;

border-left:1px solid #c2b4d8;

padding:1em;}

ul

{float:left;

width:30%;

padding:0;

margin:0;

list-style-type:none;}

a

{float:left;

width:3em;

text-decoration:none;

color:yellow;

background-color:blue;

padding:0.2em 0.6em;

border-right:1px solid white;}

a:hover {background-color:#ff3300;}

li {display:inline;}

</style>

</head>

<body>

<div>

<div><h1 class="header">h2cweb.net</h1></div>

<div><p><ul>

<li><a href="#">L one</a></li>

<li><a href="#">L two</a></li>

<li><a href="#">L three</a></li>

<li><a href="#">L four</a></li>

</ul></p></div>

<div>

<h2>Web developing tutorial </h2>

<p>At h2cweb.net you may find all the web developing and designing tutorials as you need,

from basic HTML and css to advanced. You can also find here about designing and wrodpress tutorials.</p>

<p>h2cweb.net - This is a website for learn web developing and designing!</p></div>

<div> copyright © by h2cweb.net</div>

</div>

</body>

</html>

Output:css float homepage
You can learn about the introduction of css float property by css margin , padding and float property article.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.