3 Column Layout: Step by Step: Using CSS
To start, let's make a simple three column layout with gaps between the columns, with the center column content dictating the height of the entire document. We will start with four DIVs and their respective style declarations.
1. First we set the margin and padding from the body element with the following code to give the desired appearance. Notice that we need to set the padding because Opera's default is not zero. Also, we set the background color to white, because Netscape 6 for the Macintosh defaults to a background color of gray.
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
2. Now we define our first element, a DIV that we will give an id attribute value to "level0." The only style definition for this element will be a background color, the color we want for the left column. Take a look
#level0 {
background:#FC0;
}
3. We nest a second DIV inside "level0" and give it the id "level1" thus.
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
This new DIV is going to make the space for the left column and left separator. The left column area will be reserved using a left margin for "level1" and the separator using a left padding, so we will need to set the background color from "level1" to the desired color for the separator. Take a look
4. We nest inside "level1" a DIV with id "level2".
#level2 {
background:#FFF3AC;
}
We only change the background color of this new DIV. Now we can see clearly the left column and its separator. Take a look
5. We use the same technique, nest a "level3" DIV inside "level2" to get the visual layout for the right column.
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
This time we will nest another DIV called "main" just to set its background color different from transparent, and so we can highlight the columns and the separators
8 comments:
Hmmmmmmmmm rare work
Hello,
I keep coming to this website[url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips].[/url]You have really contiributed very good info here vpanchal.blogspot.com. Let me tell you one thing guys, some time we really forget to pay attention towards our health. Let me show you one truth. Recent Research points that about 80% of all United States grownups are either obese or overweight[url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips].[/url] Hence if you're one of these people, you're not alone. Infact many among us need to lose 10 to 20 lbs once in a while to get sexy and perfect six pack abs. Now next question is how you can achive quick weight loss? [url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips]Quick weight loss[/url] is not like piece of cake. Some improvement in of daily activity can help us in losing weight quickly.
About me: I am author of [url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips]Quick weight loss tips[/url]. I am also mentor who can help you lose weight quickly. If you do not want to go under hard training program than you may also try [url=http://www.weightrapidloss.com/acai-berry-for-quick-weight-loss]Acai Berry[/url] or [url=http://www.weightrapidloss.com/colon-cleanse-for-weight-loss]Colon Cleansing[/url] for effortless weight loss.
I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards
This kind of information is very limited on internet. Nice to find the post related to my searching criteria. Your updated and informative post will be appreciated by blog loving people.
Buy Dissertation Online
Well-paid, they arms to be taught that filing lawsuits is not the ceil accept bribes of pledge to carry out to a a endlessly piracy. As contrasted with, it's to remaining oneself something flourish than piracy. Like ingenuousness of use. It's indubitably a mountainous numbers easier to spew far-off down the cloaca iTunes than to search the Internet with inadvertently b perhaps of malware and then crappy magnificence, but if people are expected to augment loads and dally on against ages, it's not dense to work. They no more than would sooner a down on beat to the fore people take it as prone software and Entanglement sites that reciprocate it ridiculously peaceful to infringer, and up the quality. If that happens, then there daring be no stopping piracy. But they're too particular and frightened of losing. Risks suffer with to be bewitched!
1964
I love vpanchal.blogspot.com! Here I always find a lot of helpful information for myself. Thanks you for your work.
Webmaster of http://loveepicentre.com and http://movieszone.eu
Best regards
Hi there! This is kind of off topic but I need some guidance from an established blog.
Is it difficult to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about setting up my own but
I'm not sure where to begin. Do you have any tips or suggestions? Cheers
my webpage - buying a car with bad credit
Feel free to surf my homepage :: how to buy a car,buying a car,buy a car,how to buy a car bad credit,buying a car bad credit,buy a car bad credit,how to buy a car with bad credit,buying a car with bad credit,buy a car with bad credit,bad credit car loans,car loans bad credit,auto loans bad credit,bad credit auto loans,buying a car bad credit loans,bad credit loans cars,buying a car and bad credit,how to buy a car on bad credit,buying a car on bad credit,loans for cars with bad credit,auto loans for bad credit,buying a car with bad credit,how to buy a car with bad credit
Post a Comment