HTML
Separating two divs with CSS
Vertical separation
html>
<head>
<style type="text/css">
.sidebar {
background: red;
margin: 10px;
padding: 0 10px 0 10px;
width: 400px;
}
.box1 {
display: block;
background: blue;
padding: 10px;
margin-bottom: 100px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1 */
text-align: justify;
}
.box2 {
display: block;
background: blue;
padding: 10px;
text-align: justify;
margin-top: 100px; /* OR ADD THIS LINE AND SET YOUR PROPER SPACE as the space above
</style>
</head>
<body>
<div class="sidebar">
<div class="box1">
<p>
Text is here
</p>
</div>
<div class="box2">
<p>
Text is here
</p>
</div>
</div>
</body>
</html>
Horizontal Separation
html>
<head>
<style type="text/css">
#Content
{
border: 3px solid blue;
position: relative;
height: 300px;
}
#divA
{
border: 3px solid red;
position: absolute;
margin-right: 25px;
left: 5px;
top: 5px;
bottom: 5px;
right: 70%;
}
#divB
{
border: 3px solid green;
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
left: 30%;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="Content">
<div id="divA">
</div>
<div id="divB">
</div>
</div>
</body>
</html>
Comments
Post a Comment