× İlan! CAN YOU CREATE a QUESTION FOR ENGLISH EXAMS.WE ARE LOOKING FOR QUESTION CREATER. FOR MORE INFORMATION CLICK HERE.

how to add multiple div tags side by side one under the other

Hello this time we are gonna play with some CSS codes and HTML codes.This post is also very helpful for wordpress theme creators and for all webdesigners.Actually in this post we are gone find out how to line up div tags side by side and one under the other.

floating
when you use two div tags side by side by floating them left and right, third div tag will ruin the alignment. But you can fix this issue with another div tag which will be div class=”clear”
Usage
1.header
2.container
3.content
4.sidebar
5.clear
6.footer
Sample HTML
<div id=”header”>Header</div>
<div id=”container”>
    <div id=”content”>Content</div>
    <div id=”sidebar”>Sidebar</div>
    <div id=”clear”></div>
    <div id=”footer”>Footer</div>
</div>

Whole Code
You can play with codes below that we have provided for you in advance
<html>

<head>
    <title>Basic HTML and CSS – BrotherBlogger</title>
    <style type=”text/css”>
#header {
    width: 300px;
    background-color: red;
    height: 30px;
    margin: auto;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}
#content {
    width: 200px;
    float: left;
    height: 300px;
    background-color: blue;
}
#sidebar {
    width: 100px;
    float: left;
    height: 300px;
    background-color: green;
}
#footer {
    width: 300px;
    height: 100px;
    background-color: gray;
}
#clear {
    clear: both;
}
</style>
</head>

<body>
    <div id=”header”>Header</div>
<div id=”container”>
    <div id=”content”>Content</div>
    <div id=”sidebar”>Sidebar</div>
    <div id=”clear”></div>
    <div id=”footer”>Footer</div>
</div>
</body>

</html>

Categorised in: Genel

This post was written by Editorial Staff

Kafasına takılan her şeyi soran meraklı biri.

Önceki

Sabri abiye sevgiler…

Sonraki

How to show get extract blogger first image in the post