Tableless Web Layout
Before moving on to creating pages with div tags, it is useful to understand some things well. One of them is the display property.
We can divide html tags into two according to how they are placed on the page: inline and block elements.
Inline elements can be placed on the same line, that is, after the tag is closed, other elements continue to be placed on the same line. For example b, u, i, a, span, font etc...
Block elements are placed one below the other on the page. In other words, when the label is finished, the page always continues from the bottom line. For example h1 , p, div etc...
With the Display feature, it is possible to make that label inline or block.
display: inline;
display: block;
display: inline-block;
We can use two methods to place elements of type Block next to each other:
-
We can use the float property.
-
Display: inline-block; we can apply css property.
These two methods will be explained separately, let's talk about the div tag first.
Div Tag
When we create the structure of our web pages with div tags instead of using tables, we can write less code and create more professional designs.
The div tag is a block element, so the div elements we write one after the other will be placed one under the other. We can adjust the placement of these boxes created with div tags as we want using CSS. In other words , we can create beautiful and useful pages by placing the divs we want side by side and adjusting the width , alignment, etc.
In the example below, a box was created with the main layer id and 5 more boxes were created in this box. Each box is also given an id to apply the style. In the CSS part, these ids can be filled in and all their properties such as border, background, placement can be determined.
<body>
<div id="mainLayer">
<div id="ustLayer"></div>
<div id="leftLayer"></div>
<div id="middleLayer"></div>
<div id="sagLayer"></div>
<div id="subLayer"></div>
</div>
</body>
In this example, all the divs in the mainLayer will be placed one under the other. However, it is requested that the boxes named leftLayer, middleLayer and rightLayer be placed side by side.
Now let's take a look at two different methods we can use for this. (Look at the next pages)
1. Placing Divs Side by Side with the Float Feature
2. Placing Divs Side by Side with Inline-Block Feature
Note: Both methods can be used not only for divs but also for li tag and similar block elements.
Placing divs side by side with css, div examples, preparing html page structure with div, tableless design, placing li tags side by side
EXERCISES
|
Example of placing divs side by side with inline-block property
|
Try It
|
By clicking on the Try It button, you can access the codes for example and see the result by making changes.
|
Example of placing divs side by side using the float property
|
Try It
|
By clicking on the Try It button, you can access the codes for example and see the result by making changes.
Read 605 times.