There is a lot of material on the Internet about divs. So I decided to create an article that would contain everything about block layout. From this article you will learn how to create your first page using block layout. But the main focus of this article I still want to make on the various problems that ordinary users face, especially beginners who are just beginning their acquaintance with Divs.
In this article we will look at the different ways of using divs, what you can do with them, how to modify them and how to use them in general. Under the article you will see comments, leave your comments, questions and I will definitely help solve your problem and even add your problem to the main article for other users.
Div – layout, what is it?
Previously, in the era of the formation of the Internet sites were made up using tables, which was quite ineffective, and to replace this outdated method came a new – block layout, using Divs. As you can see, even the names of the methods of making up sites reflect the tags that are used in the creation of the site. Previously, it was the tag <table> now tag <div>.
If you look at almost any modern website, it is possible to note their certain similarity, namely the presence on these sites certain areas: menu (menu), content (content), the header (header), the bottom of the site (footer). These zones are almost any site. And they all look like this, as shown below
In the picture, I have indicated different colors for different areas of my site. In red – the header, green – menu, blue – content, black – bottom of the site. In the middle of the content I also added a block of article titles, and actually a block of the article (text). This is how 70% of sites on the Internet look like, maybe only blocks change places, but the essence remains the same.
Advantages of block div layout
The benefits of divine layout are as follows:
- less code, which means less “garbage” tags on the page
- more flexible layout, because each div is not tied to anything (unlike a table cell)
- the ability to swap out blocks in a non-standard way (e.g. header and content appear first, whereas visually the header and content appear next)
- much more options for different JavaScript
- modern version (tabular layout is no longer used)
Start coding using <Div>
Naturally, we will start with a simple one, and our goal is to create the layout of the site, which is shown above. Yes, all the code that needs to be written on the pages I will include in the appropriate codes.
Let’s create a simple page template using divs. Please note that this code should be put after <body> and before</body>. Well, I hope you do not need to explain this.
<div> block 1 </div>
<div> block 2 </div>
<div> block 3 </div>What did I get?
On the page should appear the words: block 1, block 2, block 3, which are in a column, one after the other, with nothing else on the page. The same effect, by the way, can be achieved using the html tag <p>. You ask, and then what. Now here comes the fun part. In order to manipulate our divs, change them and generally do with them everything your heart desires (not really everything, but this is at the end of the article), we must use the file CSS. I will not dwell on it here, because I think you know what it is. It is desirable to make a habit of attaching a styles file to your pages at once, rather than inserting styles into each file. As a result, we should have two files: index.html and style.css – these files should be created in any editor (even notepad will do), the main thing is to set the extension of the file when saving it.
Let’s now define a red separator bar for our divs. Attention, below is the code to specify in the css.
div{
border: 1px solid red;
}Insert the same code in the index.html
<html>
<head>
<link href=»style.css» rel=»stylesheet»>
<head>
<body>
<div> block 1 </div>
<div> block 2 </div>
<div> block 3 </div>
</body>
</html>By creating these two files (style.css and index.html) and opening index.html we will see the same thing as in the previous case, but each div will have a red border. We will “control” the blocks using CSS and assigning a specific div its own class. Immediately I say that writing something like style=”color: #a00;” (i.e. using inline styles) directly in the html page is considered bad form, and later will complicate your life too – it is difficult to debug such a page. (Imagine that you want to change something on the site, and you have thousands of pages, tired to change. Here you just need to change just one file.
Float property for Divs
Here we have created a selection of our blocks with a red line, but, as they say, we can’t go far on this. So let’s place our blocks horizontally. To do this, let’s use the great property CSS-float. This property is responsible for the alignment of our blocks, and with this property we can align our blocks as we wish. Now let’s place our blocks horizontally, one by one.
NOTE: You can set an alignment only on the left or on the right, there is no alignment, keep it in mind! Let’s write our code in CSS.
.div{
border: 1px solid red;
float: left;
}If we now open the page in our browser, the result is that our divs are one after the other. Their width depends on the content in those divs, and is calculated automatically by the browser. If you set float:right to the second div, you will see that the second div is nailed to the right side of our page. This way you can easily set the order of our divs and form menus or content. In the future, it is advisable to set the width of each div, so that you don’t get any unnecessary tinsel.
Important!
I want to note right away, if you are new to css, get used to the good stuff right away, which is to use classes in css, not id’s. This will help you in the future, especially when you work with jQuery libraries. Also, it is highly recommended to write “talking” class names. For example, for content, it is advisable to name the diva class .content, and for the sidebar, .sidebar. If you want to emphasize some property for a certain element on your page, then use #id.
Important!
In the code you may notice a strange notation in the html — <div style=»clear: both;»></div>. What is this obscure third div, you may ask? It’s simple, dear programmers, we have to tell the browser that after this command, all other divs should go below the previous ones. If this is not done, you can get a bad situation where the divs line up in one column or overlap each other. This is a command to the browser like the html tag<br>, but for divs.
Padding and margin for divs
Important features in block layout with divs. And knowing how to use them will help you in creating individual design solutions for your site. Initially, if you omit these properties of our divs (blocks), we get the following picture: all the divs are placed right next to each other, whether they are one after the other or one below the other. It is thanks to our properties like padding and margin that we can define the gaps between the divs, or within the divs themselves. For example:
.div{
border: 1px solid red;
float: left;
padding: 10px;
margin-right: 10px;
}With this code in CSS, we specified our divs the distance between them, as well as the distance of the internal content within the block itself.
If we want one of our blocks (div) to be at some special distance from its neighboring block, we need to use the margin property.
Important: The padding and margin properties have the following parameters. If we just set the number of pixels and that’s it, that’s what we did with padding, then all four sides will do this distance. If we set two values, for example margin: 10px 5 px. Then the top and bottom will be 10px, and the left and right will be 5px.
Important: There are also personalized gaps. These are specified by assigning the words bottom, top, left, right to our properties. In our example above we use the distance to the right.
The border property – set the borders of our divs
Sometimes we need to set a distinct boundary to our blocks to clearly show the difference between them. In this case we need the border property. Thanks to this property we will be able to set a border to the diva of our choice. This property has three parameters, separated by spaces. The first parameter is the width (in pixels). Actually this is the width of our border. The second parameter is the style. There are a lot of styles, so it would take a whole article to describe them all. What styles are possible? For example, you can have a double border or a dashed one. And so on. In our example, we use solid – a single line of a given width. The third parameter is the color itself. It can be specified by a 16-character code, or by a word in English, such as black.
You can also specify a border for each side of our div, for this use the already mentioned top, bottom, left, right. Example code below.
.div{
border: 1px solid red;
float: left;
padding: 10px;
margin-right: 10px;
border: 1px solid red;
}Width and height property for divs
Now we can set the width and height of our divs, which will make our divs more visible. Simply add in the properties of each class of our divs width:300px; height:500 px. Opening our page now, you’ll see that our blocks are much larger and now look fuller. I’ll go ahead and say that width and height can be specified in pixels or percentages. Keep that in mind.
Wrapper. What is it and why?
You and I have reached a pretty important point in the layout of the site, namely the wrapper. It is up to you to choose whether to use it in the future, but I advise you to use it. But first, let’s understand what it is.
Usually, when we create a site, we want our site to be centered in our browser window. And we usually set our site to some fixed parameters, like width or height. So we would like it to look great and be visual. That’s why we created a div-block called Wrapper. It represents a container in which all the other blocks are located.
How to use it? To do this, we create our div wrapper right after the tag, then place all the other blocks of our site inside our wrapper, and then close the div wrapper.
In CSS we give our wrapper a fixed width (usually it is 990 px, but you can experiment here – this is because most users currently use a resolution of 1024×768, but the resolution is constantly growing, so in the future this value must be changed), and specify the following: margin-left: auto; margin-right: auto;
All this will make our site centered in the middle, and we must take into account that our tag has <body> also have their own indentations, so it’s advisable to remove them immediately. Insert the code below into our CSS file.
body, html{
margin: 0px; padding: 0px;
}Also, please note that if we want to change the distance from the top or any other side, it is best to use the margin property of the wrapper.
Div layout – Coding block layout TOTAL
Okay, well, now it’s time for us to finally lay out the entire site, which was shown in the picture above. Below I’ve listed the code that should be in index.html and in style.css.
CSS file:
body, html{
font: 12px tahoma;
margin: 0px;
padding: 0px;
}
div{
text-align: center;
}
.wrap{
width: 990px;
margin-left: auto;
margin-right: auto;
background: #ddd;
padding: 10px;
}
.header{
background: #e25e5e;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
.sidebar{
float: left;
padding: 10px;
width: 300px;
background: #5ee28d;
height: 700px;
}
.content{
float: left;
padding: 10px;
margin-left: 10px;
background: #5e86e2;
width: 640px;
height: 700px;
text-align: left;
}
.bottom{
background: #141926;
height: 60px;
margin-top: 10px;
padding: 10px;
}From the above code you can see that, thanks to block layout, we have reduced our code in the index.html to a minimum, but our page is very functional, it is easy to modify, editing just one file style.css. That’s all, you can use this code or make your own using this one as an example.
