How to partition a width/space/class in css | Partitioning width in Website | HTML
Some times designers may think on how to do partition in css. It is as simple as you like.
Consider a ID(container) whose width is 900 and height is 300 and name of the class is "container"(any name of your wish can be given).
Then the CSS for the above is
#container <!--- Class name --- !>
{width: 900px;
height: 300px;
}
Let us partition the container(ID) into three partitions (three sub classes) and their names inner1, inner2 and inner3 respectively.
Then we have to write the CSS accordingly.
.inner1
{
width: 290px;
margin-right: 10px; // Space Between two classes
float: left; <!----- Must needed -----!> // This is where the partition takes place
}
.inner2
{
width: 290px;
margin-right: 10px;
float: left;
}
.inner3
{
width: 290px;
margin-right: 10px;
float: right;
}
How to use it in HTML !!! (Copy paste this following code in your html and you can see how a particular space is partitioned and will add fuel to your desire towards CSS and web designing )
<html>
<head>
<style>
#container
{
width: 900px;
height: 300px;
}
#container .inner1
{
width: 290px;
// Space Between two classes
float: left;
height: 300px;
<!----- Must needed -----!> // This is where the
partition takes place
}
#container .inner1
{
width: 290px;
margin-right: 10px;
float: left;
height: 300px;
}
#container .inner2
{
width: 290px;
margin-right: 10px;
float: left;
height: 300px;
}
#container .inner3
{
width: 290px;
margin-right: 10px;
float: right;
height: 300px;
}
</style>
</head>
<body bgcolor="yellow">
<div id="container">
<div class="inner1">
<p> This space occupies 300 pixels of width and floats to
the left </p>
</div>
<div class="inner2">
<p> This space occupies 300 pixels of width and floats to
the left follows the first class (inner1)</p>
</div>
<div class="inner3">
<p> This space occupies 300 pixels of width and floats to
the right follows the second class(inner2)</p>
</div>
</div>
</body>
</html>
Your Output is:
After copy pasting try it with your own contents and images etc., Note that width and height should be accurate.
Please do subscribe more Updates on CSS... If any doubts in this tutorial please feel free to comment you doubts here !
No comments:
Post a Comment