Reputation: 167
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:
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>
Upvotes: 1
Views: 14174
Reputation: 751
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.
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;
}
Upvotes: 2
Reputation: 3429
try this one:
body
{
background-color: #fcfcfc;
}
#other
{
max-width: 540px;
padding: 30px;
background-color: #ddd;
border-radius: 3px;
vertical-align: top;
}
.container
{
text-align: center;
padding: 15px;
}
.left-div
{
display: inline-block;
max-width: 300px;
text-align: left;
padding: 30px;
background-color: #ddd;
border-radius: 3px;
margin: 15px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
text-align: left;
padding: 30px;
background-color: #ddd;
border-radius: 3px;
margin: 15px;
}
.left-text, .right-text
{
font: 300 16px/1.6 'Helvetica Neue' sans-serif;
color: #333;
}
@media screen and (max-width: 600px)
{
.left-div, .right-div
{
max-width: 100%;
}
}
Upvotes: 0