Creating Columns in CSS with Absolute Positioning


Columns can be created in CSS in a lot of ways but I am demonstrating how to create columns using the absolute positioning.

index.html


<!Doctype html>
<html>
<head>
 <title>DLAlpha</title>
</head>
<body>
<div id="container">
    <div id="column1">
        <p>
            There are three reasons why I prefer jogging to other sports. One reason is that jogging is a cheap sport. I can practise it anywhere at any time with no need for a ball or any other equipment. Another reason why I prefer jogging is that it is friendly to my heart. I don’t have to exhaust myself or do excessive efforts while jogging. Finally, I prefer this sport because it is safe. It isn’t as risky as other sports like gymnastics, racing or horseback riding. For all these reasons, I consider jogging the best sport of all.
        </p>
    </div>
    <div id="column2">
        <p>
            There are three reasons why Canada is one of the best countries in the world. First, Canada has an excellent health care system. All Canadians have access to medical services at a reasonable price. Second, Canada has a high standard of education. Students are taught by well-trained teachers and are encouraged to continue studying at university. Finally, Canada's cities are clean and efficiently managed. Canadian cities have many parks and lots of space for people to live. As a result, Canada is a desirable place to live.</p>
    </div>
    <div id="column3">
        <p>
            Aspirin can be a fatal poison. People are used to taking aspirin whenever they feel pain. It is true that aspirin is an efficacious pain-killer for example in headache cases. However, aspirin is like any other medicine can be dangerously harmful. Any unregulated use of it may result into the damage to the lining of the stomach, prolonged bleeding time, nausea, vomiting, ulcers, liver damage, and hepatitis. It is scientifically proven that excessive use of aspirin turns it into a toxin. Its toxic effects are Kidney Damage, severe metabolic derangements, respiratory and central nervous system effects, strokes, fatal haemorrhages of the brain, intestines & lungs and eventually death. Thus, the careful and regulated use of aspirin is most advisable so as not to turn into a deadly poison.
        </p>
    
    </div>
</div> 
</body>
</html>

style.css

#container{
    width:960px;
    height:500px;
    position:absolute;
    top:0;
    left:0;
}
#column1{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:33%;
    background-color:PaleTurquoise;
}
#column2{
    position:absolute;
    left:33%;
    height:100%;
    top:0;
    width:33%;
    background-color:MediumSeaGreen;
}
#column3{
    position:absolute;
    left:66%;
    top:0;
    height:100%;
    width:33%;
    background-color:Cyan;
}

Final Result

CSS Columns
See the Demo on JsFiddle

Advertisements

One thought on “Creating Columns in CSS with Absolute Positioning

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s