6 Nisan 2014 Pazar

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>


0 yorum:

Yorum Gönder