The following is the given html code and I am not allowed to alter it by any means
#exceriseHead {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
body {
color: gainsboro;
text-align: center;
}
p {
color: black
}
.exEnumeration {
color: green;
}
#exceriseFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
.contentcolumnContent {
display: flex;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Abgabeseite 3</title>
<link rel="stylesheet" href="cssaufgabe2.css">
<!-- TODO: Import der CSS Datei -->
</head>
<body>
<h1>Übungsblatt 4</h1>
<div id="exceriseHead">
Aufgabe 3
</div>
<div class="contentcolumnContent">
<div class="exercisePart">
<div class="exEnumeration">
<h1>a.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>b.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>c.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
</div>
<div id="exceriseFooter">
[Gruppenbezeichnung]
</div>
</body>
</html>
This is how it looks
This is how it should look like
Hi, I got an assignment to write a css sheet in order to make a given html page look like the image below. However I can't figure out, how to put the enumerations ( a.), b.)and c.)) in front of the text. I hope you can help me :(
The work is almost done: for the .exercisePart elements you need to set flex-grow and flex-shrink to 1. display: flex and align-items: center so the letter and the text can be side by side
A small gap to the outer flexbox container may improve readability.
#exceriseHead {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
body {
color: gainsboro;
text-align: center;
}
p {
color: black
}
.exEnumeration {
color: green;
}
#exceriseFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
.contentcolumnContent {
display: flex;
gap: 1rem;
justify-content: space-between;
}
.exercisePart {
flex: 1 1 auto;
display: flex;
gap: .25rem;
align-items: center;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Abgabeseite 3</title>
<link rel="stylesheet" href="cssaufgabe2.css">
<!-- TODO: Import der CSS Datei -->
</head>
<body>
<h1>Übungsblatt 4</h1>
<div id="exceriseHead">
Aufgabe 3
</div>
<div class="contentcolumnContent">
<div class="exercisePart">
<div class="exEnumeration">
<h1>a.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>b.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>c.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
</div>
<div id="exceriseFooter">
[Gruppenbezeichnung]
</div>
</body>
</html>
The .exerciseParts contain two <div>s, which by default have display: block, meaning they take all the width they can from their container, thus stacking vertically.
In order to change that, you can make the .exercisePart flexbox containers:
.exercisePart {
display: flex;
}
That way by default all their children will stack horizontally and try and take the right amount of space.
Related
I am making cards using flexbox(https://jsfiddle.net/vs37qo0r/):
/* Only included flex related styles*/
.container {
display: flex;
flex-direction: row;
/*default*/
align-items: stretch;
/*default*/
justify-content: space-around;
}
.card {
flex-basis: 20%;
}
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<!-- two more cards of same format-->
</div>
Each <h3> and <p> line up with each other. But, not every <p> is the same size, which then throws off where the <button> is layed out. How can I tell all of the <button>s to line up with each other regardless of the size of the <p> above it?
Set .card to display: flex
Enclose h3, p in a wrapper with flex: 1
Set the button to be at flex-end
jfFiddle
body{
background-color: white;
margin-top: 100px;
padding: 0;
}
.container{
display:flex;
flex-direction: row; /*default*/
align-items: stretch; /*default*/
justify-content: space-around;
}
.card{
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
}
.card__content {
flex: 1;
}
.button {
align-self: flex-end;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="card__content">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
jsFiddle
There is no need for a wrapper or more than 3 additional properties. Set .card to flex:
.card {
display:flex;
flex-direction: column;
....
}
Set .card p to flex: 1
.card p {
flex: 1;
}
Try making the .card elements flex-parents themselves, then play with the justify-content property.
.card{
…
display: flex;
flex-direction: column;
justify-content: space-between;
}
body {
background-color: white;
margin-top: 100px;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
/*default*/
align-items: stretch;
/*default*/
justify-content: space-around;
}
.card {
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
I'm working with you jsfiddle version:
there I added these extra code, and you never have to touch your HTML for it!
.card{
...
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: auto !important;
}
and it's working fine!
body {
background-color: white;
margin-top: 100px;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
/* default */
align-items: stretch;
/* default */
justify-content: space-around;
}
.card {
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: auto;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
You need to add display: flex, flex-dicrection: column and justify-content: space-between.
Your new css .card class looks like:
.card{
flex-basis: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
I hope this will work for you!
I created this layout, its almost there but I'm struggling with the images and text beside it. I want the entire box to flex at the same time, to keep the images and text responding at the same time.
What am I doing wrong? I think I am suffering from a mental block because this is my first time using flex.
.container {
max-width: 1750px;
}
.venture,
#event-content,
#news-content {
background-color: #eaeaea;
color: #444;
}
.catch {
color: #fff;
text-align: center;
margin: 1vmin 0vmin 0vmin 0vmin;
padding: 20px 50px;
background-color: #3366cc;
}
.tagline {
margin-top: 5%;
text-align: center;
font-weight: bold;
font-size: 130%;
}
#news-content a:link,
#news-content a:hover,
#news-content a:visited {
text-decoration: none;
color: #444;
font-family: FG Font;
font-size: 2vmin;
}
#news-content .btn.btn-primary {
background-color: #3366cc;
font-family: Arial;
border-color: #3366cc;
}
#news-content .tag {
background-color: #ef8b1e;
display: inline-block;
padding: 5px;
border-radius: 0px 0px 5px 5px;
font-size: 1.5vmin;
font-family: FG Font;
}
#news-content .title {
padding: 25px 10px 0px 10px;
}
#event-content .date {
background-color: #ef8b1e;
font-family: FG Font;
font-size: 3vmin;
display: inline-block;
text-align: center;
}
.main-wrapper {
display: flex;
flex-wrap: nowrap;
height: 70vh;
align-items: stretch;
}
.main-wrapper>div {
width: 50%;
min-height: 50vh;
}
.hero-img {
display: flex;
}
.hero-img>div {
margin: 1vmin;
align-self: stretch;
flex-basis: 50%;
}
.info-section {
display: flex;
flex-direction: column;
align-items: stretch;
}
.info-section .media-section {
margin: 1vmin 0vmin;
}
.info-section .venture {
position: relative;
padding: 3vmin 3vmin 2vmin 3vmin;
}
.media-section>div {
display: flex;
flex-direction: row;
}
.media-section>div>div {
flex-basis: 50%;
}
#news-content {
margin-right: .5vmin;
}
#event-content {
margin-left: .5vmin;
}
#news-content,
#event-content {
max-height: 150px;
}
<div class="container">
<div class="main-wrapper">
<div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
</div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
</div>
</div>
<div>
<div class="info-section">
<div class="catch">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</div>
<div class="media-section">
<div>
<div id="news-content">
<div class="tag">In the News</div>
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<a href="">
<div class="btn btn-primary">Link</div>
</a>
</div>
<div id="event-content">
<div class="date">
<div class="num">12</div>
<div class="month">DEC</div>
</div>
<div class="details">
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="venture">
<h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
<div class="tagline">LOREM IPSUM</div>
</div>
</div>
</div>
</div>
</div>
Not sure if that you want, the entire container in same column can be done like that :
<pre>
<div class="container">
<div class="main-wrapper">
<div>
<div class="info-section">
<div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
</div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
</div>
</div>
<div class="catch">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</div>
<div class="media-section">
<div>
<div id="news-content">
<div class="tag">In the News</div>
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<a href="">
<div class="btn btn-primary">Link</div>
</a>
</div>
<div id="event-content">
<div class="date">
<div class="num">12</div>
<div class="month">DEC</div>
</div>
<div class="details">
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="venture">
<h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
<div class="tagline">LOREM IPSUM</div>
</div>
</div>
</div>
</div>
</div>
</pre>
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
h1{
text-align: center;
font-weight: bold;
}
h3{
color: #09423f;
}
p{
color: black;
}
#works{
max-width: 100%;
height: auto;
border: 0;
}
<h1>HOW IT WORKS</h1>
<div class="row">
<div class="col-xs-4">
<img src="img/create.svg" class="img-responsive" id="works" alt="create">
<h3><b>CREATE YOUR IDEAS</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut.</p>
</div>
<div class="col-xs-4">
<img src="img/sell.svg" class="img-responsive" id="works" alt="sell">
<h3><b>POST IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut </p>
</div>
<div class="col-xs-4">
<img src="img/earn.svg" class="img-responsive" id="works" alt="earn">
<h3><b>EARN IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut</p>
</div>
</div>
I want to try to align all three images with caption in one line. I try float: left but all three didn't work. I try other way too but it remains same. Please help me. You give me right answer I would click green tick.
add this
.col-xs-4{
width: 33.33%;
}
.col-xs-4 img{
text-align: center;
margin: 0 auto;
}
You haven't attached your bootsrap CDN's though you was using Bootstrap like col-xs-4, attach it and then you Boxes will align perfectly horizontal
Bootstrap CDN attach this at the <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
and remove following class which is unnecessary
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
CodePen: http://codepen.io/anon/pen/graKZe
I have attached a bootstrap cdn in your code.
And because of the clear:both in your (.col-xs-4) inside CSS you could not align them horizontally.
plunker copy attached: enter link description here
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
I'm trying to setup a section of my page with 3 columns using Flexbox.
The 3 columns are set up just fine, the issue I am having is with the section1 div not being as tall as the children elements.
I have tried height: auto, height:100%, overflow: auto, overflow:visible, etc. The only time the section1 div changes height is when I specifically state a pixel height. It seems as though the flexbox items are acting as floats so I tried a clear:both to no avail.
I have searched both stackoverflow and other sites and have not found an answer which leads me to believe it is something I am doing wrong with flexbox.
body {
background: lightgrey;
}
.body {
position: relative;
width: 75% /* 747.75px */;
margin: auto;
top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
display: block;
position: relative;
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
left: 2.5%;
}
.section1 {
position: relative;
display: flex;
justify-content: space-around;
top: 5em;
height: auto;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
See Relative positioning
Once a box has been laid out according to the normal flow or
floated, it may be shifted relative to this position. This is called
relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1
were not offset and B2 is not re-positioned after B1's offset is
applied. This implies that relative positioning may cause boxes to
overlap.
Here you don't want to shift a single box, you want it to push following content too. Then, you should use margins for that.
body {
background: lightgrey;
}
.body {
width: 75% /* 747.75px */;
margin: auto;
margin-top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
margin-left: 2.5%;
}
.section1 {
display: flex;
justify-content: space-around;
margin-top: 5em;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
At the moment, I have a tabular-style grid system, using a combination of inline-block and width. I do need to clarify that the <div>s I'm using in the jsFiddle contain text, while in reality, they'll each contain a table with a varying number of rows.
The sections are of unequal heights with the height value being calculated by the content. I'm not using Bootstrap, and I don't intend to.
Here is a jsFiddle of what I currently have, along with a diagram here.
And here is what I'm trying to achieve with this code. I should note that I've already tried changing it to display:block in combination with float:left and I couldn't achieve my goal.
The idea is that I'm trying to eliminate the unnecessary whitespace where a section on one side may be three times taller than the opposite side.
Can anyone enlighten me as to how I could approach this?
Here is a solution, by wrapping your sections with an article(could be div), and give that article the display:table-cell instead of #content, plus some minor changes
* {
font-size: 16px;
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background: #efefef;
color: #555;
font-family: "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.25;
}
h2 {
padding: 1.5em 0 0 0;
}
#content {
background: navy;
margin: auto;
height: 200px;
padding: 2em;
width: 70%;
display: table;
margin: auto;
width: 100%;
table-layout: fixed
}
.cell {
display: table-cell;
vertical-align: top;
width: 44% padding: 0 2%;
}
section {
background-color: lightblue;
margin: 5%;
padding: 5%
}
<main id="content">
<article class="cell">
<section>
<h2>Section 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 3</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim sed urna maximus viverra at et turpis. Nulla ut tortor ac erat consequat consectetur.Ut consectetur id massa convallis gravida. Nulla eget urna pharetra, pretium enim et, facilisis
est. Praesent sit amet erat nec ligula rhoncus semper non sed purus.</div>
</section>
</article>
<article class="cell">
<section>
<h2>Section 4</h2>
<div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
</section>
<section>
<h2>Section 5</h2>
<div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
</section>
<section>
<h2>Section 6</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
</article>
</main>
UPDATE
based on OP comments, here is a responsive solution to meet OP requirements:
* {
font-size: 16px;
margin: 0;
padding: 0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
body {
background: #efefef;
color: #555;
font-family:"Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.25;
}
h2 {
padding: 1.5em 0 0 0;
}
#content {
background: navy;
margin: auto;
height: 200px;
padding: 2em;
width: 70%;
display: table;
margin: auto;
width: 100%;
table-layout:fixed
}
.cell {
display: table-cell;
vertical-align: top;
padding:0 2%;
}
section {
background-color:lightblue;
margin:5%;
padding:5%
}
#media (max-width:1920px) { /* this will go from 1920px to 1280px */
.cell {
width: 44%;
}
}
#media (max-width:1280px) { /* this will go from 1280px to 480px */
.cell {
width: 50%;
float:left;
}
}
#media (max-width:480px) { /* this will go from 480px to 0px */
.cell {
width:100%;
display:block
}
}
<main id="content">
<article class="cell">
<section>
<h2>Section 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
<section>
<h2>Section 3</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim sed urna maximus viverra at et turpis. Nulla ut tortor ac erat consequat consectetur.Ut consectetur id massa convallis gravida. Nulla eget urna pharetra, pretium enim et, facilisis
est. Praesent sit amet erat nec ligula rhoncus semper non sed purus.</div>
</section>
</article>
<article class="cell">
<section>
<h2>Section 4</h2>
<div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
</section>
<section>
<h2>Section 5</h2>
<div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
</section>
<section>
<h2>Section 6</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
</article>
<article class="cell">
<section>
<h2>Section 7</h2>
<div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
</section>
<section>
<h2>Section 8</h2>
<div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
</section>
<section>
<h2>Section 9</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</section>
</article>
</main>