CODEWITHSUNDEEP
htmlcsscss-float
Deverill
Deverill

Reputation: 971

Easy CSS: Making column backgrounds line up

I know this will be easy for someone experienced in CSS. I made a mock-up of my code here to show what I have. I'm trying to get the background colors, pink and green, extend to the bottom of the white column... or whichever one is longest. I thought the clear:both would work but I'm missing something I know is simple. Help appreciated, snickers expected.

JSFiddle

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color:lightblue;
            }

            #mainColumn {   
                float: left;
                margin-left: 0;
                margin-right: 0;
                width: 830px;
                background-color: white;
            }

            #leftColumn {    
                float: left;
                margin-left: 0;
                margin-right: 0;
                width: 195px; /* modified - shortened */
                background-color:pink;
            }

            #rightColumn {
                float: left;
                width: 195px;
                background-color:green;
            }

            #myWrapper {
                background-color: black;    
            }

            .clearit {
                clear: both;
            }
        </style>    
    </head>

    <body>
        <div id="myWrapper">
            <div id="leftColumn">
                some content
            </div>
            <div id="mainColumn">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper urna a magna euismod, vitae dapibus justo feugiat. Pellentesque ac dui lorem. Fusce ligula urna, ultrices a lectus sit amet, luctus semper est. Curabitur a egestas elit, vitae tincidunt elit. Donec quis nunc id nibh fermentum lobortis egestas id eros. Aenean eget purus erat. In auctor, ipsum in dapibus imperdiet, nulla elit posuere neque, ultrices convallis ligula odio eget felis. Maecenas quis turpis nulla. Nam a velit non lorem semper tincidunt eget iaculis sem. Donec vitae venenatis libero. Duis consequat augue sed sapien cursus dapibus.
            </div>
            <div id="rightColumn">
                even more content
            </div>
        </div>
        <div id="EvenUp" class="clearit">
        </div>
        <p> On with life </p>
    </body>

Upvotes: 1

Views: 65

Answers (1)

Alex Char
Alex Char

Reputation: 33218

One solution is to place both left and right columns inside mainColumn and use display:table and display:table-cell

css

body {
    background-color:lightblue;
}
#mainColumn {
    margin-left: 0;
    margin-right: 0;
    width: 830px;
    background-color: white;
    display: table;
}
#leftColumn {
    display: table-cell;
    margin-left: 0;
    margin-right: 0;
    width: 195px;
    /* modified - shortened */
    background-color:pink;
}
#rightColumn {
    display: table-cell;
    width: 195px;
    background-color:green;
}
#myWrapper {
    background-color: black;
}
.clearit {
    clear: both;
}

fiddle

Upvotes: 1

Related Questions