Search code examples
htmlcssresponsive-designalignment

Align two responsive divs, side by side

I'm trying to code a simple comparison table, but I can't get what I want to.

An image is worth a thousand words, so I sketched what I would like to get:

enter image description here

Currently, the website page is a single column of divs (represented above by the "other content" area). The grey area underneath the two divs is just to represent the div I'm using to contain them, but I don't need it.

So, basically, I just want to add another div containing two divs that look like in the image, but every suggestion is welcome : )

Also, the divs must be responsive, of course ; )

EDIT 1

As suggested, here's the code that worked so far: I tried many things, anyway once I add some space around the divs, they start to get messed up. Most of it the code is unnecessary, I know : (

* {
color: #fff;
font-family: "Avenir", sans-serif;
font-size: 18px;

border 0;
margin: 0;
padding: 0;
}

.container {
display: flex;
align-content: center;

margin-bottom: 20px;
width: 100%;

background-position: center;
background-size: cover;
}

.content {
width: 100%;
}

.container {
background-color: hsl(200, 100%, 95%);

margin: auto;
padding: 0%;
}

.comparecontainer {
margin: 0%;
float: left;

height: auto;
width: 50%;
}

.compare {
padding: 5%;

height: 100%;
width: 100%;
}

.lite {
background-color: hsl(40, 100%, 50%);
}

.full {
background-color: hsl(150, 80%, 50%);
}



.button {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
font-family: ;
font-size: 18px;
font-weight: 500;
line-height: 200%;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
padding: 1% 3%;
border: 2px solid #fff;
border-radius: 0;
outline: none;
}

.button:hover,
.button:active {
background-color: #fff;
}

.button:hover .lite {
color: hsl(40, 100%, 50%);
}

.button .full:hover {
color: hsl(150, 80%, 50%);
}



h2 {
font-size: 36px;
margin: auto;
}

h3 {
font-size: 21px;
margin: 2.5% 0;
}

h4 {
font-size: 21px;
margin: 10% 0;
}

ul {
list-style: none;
margin: 5% 0;
}

li {
margin: 2.5% 0;
}
    <div class="container">
<div class="content">

    <div class="comparecontainer">
    <div class="compare lite">
<h2>First DIV</h2>
<h3>Subtitle</h3>

    <ul>
<li><b>item</b> one</li>
<li><b>item</b> two</li>
<li><b>item</b> three</li>
<li><b>item</b> four</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>feature</li>
    </ul>

<h4>text</h4>

<a href="#" class="button lite">button</a>

    </div>
    </div>

    <div class="comparecontainer">
    <div class="compare full">
<h2>Second DIV</h2>
<h3>Subtitle</h3>

    <ul>
<li><b>item</b> one</li>
<li><b>item</b> two</li>
<li><b>item</b> three</li>
<li><b>item</b> four</li>
<li><b>item</b> five</li>
<li><b>item</b> six</li>
<li><b>item</b> seven</li>
<li><b>feature</b></li>
    </ul>

<h4>text</h4>

<a href="#" class="button full">button</a>

    </div>
    </div>

</div>
    </div>

Solution

  • You should use the calc css feature like so:

    width: calc(50% - 32px);

    It helps laying out percentage based layouts!

    Edit: I just realised you wanted to have content with unknown height inside the boxes. So I added a flex display as well.

    CODEPEN DEMO HERE

    div {
  display:block; 
  width: 100%; 
  background: rgba(0,0,0,0.8);
  border: 1px solid #fff;
}

.wrapper {
    margin-top: 12px;
    display: flex;
    box-sizing: border-box;
    padding: 32px 16px;
}

.wrapper > div {
    box-sizing: border-box;
    width: calc(50% - 32px);
    float: left;
    margin: 0 16px;
}

body {
  max-width: 600px;
  margin: 0 auto;
  color: #fff;
}