1) Suppose we have a parent div and 3 child divs, first we do not set any float property in the child divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin:15px;
font-family:Arial; font-size:12px;
}
.parent {
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
width: 500px;
}
.parent div {
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
}
.parent p {
border:1px dashed #111111;
background-color:#ff90ba;
}
.child1 {
}
.child2 {
}
.child3 {
}
</style>
</head>
<body>
<h1>CSS -Get more understings of float property</h1>
<div class="parent">
<div class="child1">Box-1</div>
<div class="child2">Box-2</div>
<div class="child3">Box-3</div>
<p>This is text. This is text. This is text. This is text
This is text. This is text. This is text. This is text.</p>
</div>
</body>
</html>
Result:
.child1 {
float: left;
}
The second box will move up and take the right space of box 1
Result:
.child1 {
float: left;
}
.child2 {
float: left;
}
The third box will move up in the same line as the first and second box:
Result:
4) Set all three child box float to left
.child1 {
float: left;
}
.child2 {
float: left;
}
.child3 {
float: left;
}
All child boxes and text are in the same line.
Result:
.child1 {
float: left;
}
.child2 {
float: left;
}
.child3 {
float: right;
}
Now text is between the second box and third box.
Result:
No comments:
Post a Comment