Creating Page Using Div
On our previous page, we mentioned that the tableless design is more useful and the div tag.
We mentioned that the div tags created as below will be placed one under the other and that we need to use Css to bring these elements side by side.
<body>
<div id="mainLayer">
<div id="topLayer">Title etc</div>
<div id="leftLayer">Our Links</div>
<div id="middleLayer">Content 1</div>
<div id="rightLayer">Content 2</div>
<div id="subLayer">Footer</div>
</div>
</body>
In the example above, the boxes named leftLayer, middleLayer and rightLayer are required to be placed side by side. For these three boxes
We can implement the feature.
float property
The float feature allows html tags of block type to be placed side by side.
The position of the box on the screen can be determined with the left and right values.
By giving the left value, the box can be left justified where it is located, and by giving the right value, it can be made to justify to the right.
We can make the boxes created in the example above fit correctly by applying the following styles:
#mainLayer
{
margin:0 auto;
}
#leftLayer
{
float:left
}
#middleLayer
{
float:left
}
#rightLayer
{
float:right;
}
.clear
{
clear:both;
}
Things to pay attention:
In this example, we can also use float: Left for rightLayer. All three layers are placed in turn, leaning to the left.
By making Float: right, it is ensured that the rightLayer aligns to the far right in that section.
If the div elements placed next to each other take up more than the width of the parent layer, they will not fit side by side. In this case, the last div will slide down and the layout will be broken.
When calculating the total footprint of the divs, margin, padding and border values should also be calculated. (see Css Box Model)
When the side-by-side placement ends, an empty div should be opened and Clear:Both should be applied.
Clear feature
The Clear feature is used when we set the layout of the boxes using the Float feature and want the layout to return to normal after a certain point.
For this, as in the example above, an empty div tag is opened where the side-by-side placement ends and the Clear:both property is applied. In this way, the effect of the float property ends and the following boxes are placed one under the other as normal.
There is often confusion about exactly where to apply the clear:both property. We can write a rule like this:
As soon as the last div with float applied is closed, an empty div should open and clear:both should be applied.
In the example below, the last div with float applied is the rightLayer. That's why clear is applied as soon as the rightLayer is finished.
In the example below, if we remove the empty box with the clear property applied, we will see that the subLayer slides over the others.
<body>
<div id="mainLayer">
<div id="topLayer">Title etc</div>
<div id="leftLayer">Our Links</div>
<div id="middleLayer">Content 1</div>
<div id="rightLayer">Content 2</div>
<div class="clear"></div>
<div id="subLayer">Footer</div>
</div>
</body>
You can see other pages related to tableless design at the next pages:
1. Tableless Design and Div Element
2. Placing Divs Side by Side with the Float Feature
3. Placing Divs Side by Side with Inline-Block Feature
Placing divs side by side using float property, placing li tags side by side, what is clear both, what is float property
EXERCISES
|
Example of web page created with div
|
Try It
|
In this example, float: left is applied to 9 consecutive divs so that they are placed side by side.
The container named div limits the total width and the element that does not fit on the side continues by passing to the bottom.
clear: both is applied after the 9th div. In this way, the settlement will continue to return to normal.
|
Bringing Divs Side by Side with the Float Feature
|
Try It
|
By clicking on the Try It button, you can access the codes for example and see the result by making changes.
Read 543 times.