Beginners
There are few simple rules that you can follow to make structuring pages with the division tag a little simpler.
These rules apply when you are trying to place 2 or more divisions horizontally adjacent to each other on the same page.
Use the HTML5 doctype:
<!DOCTYPE html>
Nest the adjacent divisions within a container division.
Float the container so that it expands with the height of the tallest nested column.
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
*Note: This demo is not 100% liquid because it uses a table and the pre tag to present CSS code.
Beginners
div.container {
float: left;
width: 100%;
background:#BFBFBF;
border-radius: 20px;
box-shadow: 5px 5px 10px #0e0e0e
} |
div.left {
float : left;
width: 42%;
padding:4% 4%;
}
|
div.right {
float : left;
width: 42%;
padding:4% 4%;
}
|
body {
/*Set width */
max-width: 1000px;
/* center body */
margin: 1% auto
} |
*Padding:(top-bottom left-right)
42% + 4% + 4% = 50%