I certainly did not originate this method of creating a two column layout, but I will summarize it for you. Step one: create a wrapper or container div and give it a CSS rule: position:relative.
#wrapper {
position: relative;
}
I’m temporarily ignoring the need for headers and footers. You can adjust for them. Step two: position the first div (we’ll call it #nav) using position:absolute. The numbers you use for top and left determine whether this column will be on the right or the left side of your page. Give the div a suitable width for your navigation.
#nav {
width: 20%;
position: absolute;
left: 10px;
top: 40px;
}
Step three: Use a margin to create a second column with another div (we’ll call it #content). If the nav is on the left, use a wide margin-left. If the nav is on the right, use a wide margin-right. Assign a width that allows for the nav.
#content{
width: 70%;
margin-left: 25%;
}
Stumble it!
3 Comments
Why is position:relative used for wrapper div?
Absolutely positioned DIVs can line up inside a container DIV defined as relative. The absolutely positioned divs still move up and down on the page in response to font-size changes and their position in relation to each other.
There are other ways to create a similar layout using floats. But floats have their own set of issues and this layout avoids them. That’s what I found interesting about this way of doing it.
Virginia
Explanation re use of position:relative is excellent. Thank you so much
What can you contribute?