Вертикальные полосы в HTML / CSS

Question

Как мне поступить при построении вертикальных полос, примыкающих друг к другу (соприкасающихся) от левой стороны страницы до середины (все одинакового размера по ширине)?

Answer 1

Это бы сработало для вас:

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

И CSS для этого:

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;
}

Вы можете увидеть это в действии здесь .