CODEWITHSUNDEEP
csshtml
Dylan de St Pern
Dylan de St Pern

Reputation: 469

Align two divs side by side

I have three divs.. Container, Content_1 and content_2.

What I want to do is position the two content divs inside the container, side by side. now I have half accomplished that.. But the thing is I want my container to automatically resize to the div that is highest. so the container height must be auto. With the code I have written on JSFiddle, the content_2 on the right sets the container height, but the content_1 on the left does not.. Please help I am completely stuck.

HTML:

<div class="container">

<div id="content_1">

</div>

<div id="content_2">

</div>

JSFiddle

Upvotes: 2

Views: 155

Answers (3)

cssyphus
cssyphus

Reputation: 40106

Is this what you wanted?

jsFiddle Demo

.container {
    background-color: #000; 
    width: 980px;
    min-width: 980px;
    height: auto;
    position: relative;
    margin: 50px auto 100px auto;
    top:60px;
    bottom:900px;
    border:1px solid #000;
    overflow:auto; /* <========= */
}

Upvotes: 2

StijnEversdijk
StijnEversdijk

Reputation: 11

The problem is that you forgot the clearfix. There are a couple of ways to do a clearfix on google, but the one that will fix this problem is adding overflow:hidden to your container div.

Check out my example on http://cdpn.io/sEwfI

 .container    
     overflow: hidden;

Upvotes: 0

Gert B.
Gert B.

Reputation: 2347

your divs closing tag is open: </div to </div>

Upvotes: 0

Related Questions