CODEWITHSUNDEEP
htmlcssalignment
starbucks
starbucks

Reputation: 3016

How to I align the right container with the left container in terms of top margin?

I have the following code:

html:

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
</div>

css:

.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
}
.left {
    width: 600px;
    margin-right: 20px;
}
.right {
    width: 320px;
    height: 300px; 
    background-color: #999;
    float: right;
}
.panel {
    background-color: red;
}

The .right div doesn't align with the .left div in terms of margin top. The .right div shows a bit below the .left div. how can i align it so that the .right div is aligned with the .left div only in terms of the margin top?

Upvotes: 2

Views: 10291

Answers (2)

Michael
Michael

Reputation: 7092

.left {
    float: left; /* ADD THIS */
    width: 600px;
    margin-right: 20px;
}

Just add float: left to your left div.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191789

Due to how floats work, the .right div is pushed by the .panel div that .left contains because it is not floated.

One simple solution is to move the .right div before .left in the HTML: http://jsfiddle.net/sRVDW/

Another is to float: left the .left div: http://jsfiddle.net/sRVDW/1/

Upvotes: 2

Related Questions