Alignment using float property in css
By admin | March 19, 2008
In this tutorial you will learn the use of float property in css. We will create two unordered lists and align them side by side. Write the following code in your html page. You can use any text editor or software like dreamweaver for that.
<div id=”test”>
<div class=”lefty”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
<div class=”righty”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</div>
Now make these entries to your css file:
#test {
width:200px;
background-color:#66CC99;
}
#test ul {
margin:0;
padding:0;
}
#test li {
list-style-position:outside;
margin-left:25px;
padding-left:4px;
list-style:circle;
}
#test .lefty {
float:left;
width:100px;
}
#test .righty {
float:right;
width:100px;
}
Now you will get the following output (Check with internet explorer, firefox or safari browser).
Topics: CSS, Web Design |