Vertical Bars in HTML/CSS

Question

How would I go about constructing vertical bars, all adjacent to each other (touching) from the left side of the page to the middle (all the same size in width)?

Answer 1

This would do the trick for you:

<div id="wrapper">
    <div class="bar green"></div>
    <div class="bar greener"></div>
    <div class="bar greenest"></div>
    <div class="bar greenerest"></div>
</div>

And the CSS to go with it:

html, body, #wrapper, .bar {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    width: 50%;
}

.bar {
    float: left;
    width: 25%; /* must never add up to more than 100% */
}

.green {
    background-color: #a8ff00;
}

.greener {
    background-color: #7ad800;
}

.greenest {
    background-color: #3eb603;
}

.greenerest {
    background-color: #2c7e03;
}

You can see it in action here.