How to place two divs next to each other using HTML and CSS

How to Align Two Divs Side by Side Using CSS

I want to position the two green boxes shown below next to each other in a horizontal alignment.

I’ve tried using display: inline-block, but it’s not achieving the desired result.

.container {
  max-width: 770px;
  margin: auto;
  margin-top: 15px;
  overflow: hidden;
}

.left,
.right {
  display: inline-block;
  width: 50%;
  overflow: hidden;
  border-radius: 3px;
  margin-right: 10px;
  background-color: #58c5b3;
  color: #ffffff;
  vertical-align: top;
}

.left-header,
.right-header {
  font-size: 10px;
  padding: 15px;
}

.left-text,
.right-text {
  padding: 5px;
  font-size: 15px;
}

<div class="container">
  <div class="left">
    <div class="left-header">BORDER-LEFT</div>
    <div class="left-text">
      One two three four five six seven eight nine ten
    </div>
  </div>
  <div class="right">
    <div class="right-header">BORDER-RIGHT</div>
    <div class="right-text">
      One two three four five six seven eight nine ten
    </div>
  </div>
</div>

Solution

Here's a simple example. I did not use any of your css, as the html and those things are missing, but hopefully this can get you going:

CSS:

.container {
    position: relative;
    width: 500px;
    background: red;
    overflow: hidden; /*To get your parent to respect the floated divs*/
}

.one, .two, .three {
    position: relative;
    width: 33.33333333333333%; /*Because you only have 3 elements (100 divided by 3)*/
    height: 100px;
    float: left; /*To get them next to each other if all else fails*/
    background: green;
}

HTML:

<div class="container">
    <div class="one">
        Div One
    </div>
    <div class="two">
        Div Two
    </div>
    <div class="three">
        Div Three
    </div>
</div>

EDIT:

I tried to replicate your website to what I think you are trying to explain :).

Here's a quick screenshot:

Please see this HTML and CSS to replicate the image above :):

<!DOCTYPE html>
<html>
    <head>
        <title>Cocos - Audun Hilden</title>
        <style>
            body {
                font-family: 'Roboto', sans-serif;
                background: #36536B;
            }

            header {
                background: #FFFFFF;
                color: #919191;
                padding: 15px;
                line-height: 30px;
                max-width: calc(770px - 30px);
                border-radius: 3px;
                margin: auto;
            }

            .container {
                max-width: 770px;
                margin: auto;
                margin-top: 15px;
                overflow: hidden;
            }

            .left, .right {
                float: left;
                overflow: hidden;
                border-radius: 3px;
                margin-right: 10px;
                max-width: calc(50% - 5px);
            }
            .right {
                margin-right: 0px;
            }

            .left-header, .right-header {
                background: #58C5B3;
                font-size: 10px;
                padding: 15px;
                color: #FFFFFF;
            }

            .left-text, .right-text {
                background: #FFFFFF;
                padding: 5px;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <header>
            FORSIDEN
        </header>
        <div class="container">
            <div class="left">
                <div class="left-header">
                    BORDER-LEFT
                </div>
                <div class="left-text">
                    One two three four
                </div>
            </div>
            <div class="right">
                <div class="right-header">
                    BORDER-RIGHT
                </div>
                <div class="right-text">
                    One two three four five six seven
                </div>
            </div>
        </div>
    </body>
</html>

Take some time to look at the HTML and CSS to try figure out what is going on. Once you understand, you'll never forget!