I use flexbox to layout my index.html in a desktop window screen to have two div elements in one row, one long div element in the second row, and two div elements, which one of them contains a list, in the third row. I need some spacing between the two div elements in the first row and third row. When I tried using margin-left or margin-right on a div element, the div elements collapse on top of each other.
I tried changing the width of each div element, but they end up collapsing on top of each other. I also tried justify-content and align-content on the content class but nothing happens.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
header {
background-color: #414C6A;
background-image: url("../img/img2.jpg");
background-size: 100%;
background-position: top left;
position: relative;
background-repeat: no-repeat;
padding: 20%;
text-align: center;
color: white;
}
footer {
background-color: #7481AD;
color: white;
text-align: center;
padding: 14px;
}
.title {
margin: 0;
}
.unordered_list {
list-style: none;
}
/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}
.div-content,
.div-list {
padding: 0.75em;
border-radius: 12px;
margin-bottom: 1em;
}
.div-content p,
.div-list .unordered_list {
margin-top: 0.3125em;
padding: 0 0.625em;
}
.div-content {
background-color: #25476c;
}
.div-list {
background-color: #564B75;
}
/* LAYOUT */
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
display: flex;
flex-wrap: wrap;
}
.div-content {
width: 50%;
}
.grow {
width: 100%;
}
.div-list {
flex-grow: 1;
}
footer {
flex-shrink: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>CSS Basics</title>
<!--
Go to this link:
http://www.cssdrive.com/imagepalette/index.php
-->
</head>
<body>
<header>
<h1 class="title">CSS Basics</h1>
</header>
<div class="content">
<div class="div-content item-1">
<h2>What is Lorem Ipsum?</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
<div class="div-content item-2">
<h2>Diego Salas</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
<div class="div-content grow">
<h2>Diego's Favorite Dogs</h2>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text. All the
Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet. It
uses a dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
<div class="div-list">
<h2>Diego's Favorite Programming Language</h2>
<ul class="unordered_list">
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
<li>JavaScript</li>
</ul>
</div>
<!-- <img src="img/img1.jpg" alt="Mountain">-->
<div class="div-content">
<h2>Why do we use it?</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
</div>
<footer>
<p>CSS Basics © Diego Salas</p>
</footer>
</body>
</html>By wrapping each of the items that we want to be on the same row in a <div class="row"></div> you can then make it so each element will take up half of that row's width. This will also account for the margin of the items.
The important parts here are:
.row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
margin: 10px 0;
}
This make it so each row element's width is 100% of its parent object, in this case it is the container element.
You then just need to set the width, and the margin on the .div-content and on .div-list
width: 50%;
margin: 0 10px;
The snippet below shows this in action.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
header {
background-color: #414C6A;
background-image: url("../img/img2.jpg");
background-size: 100%;
background-position: top left;
position: relative;
background-repeat: no-repeat;
padding: 20%;
text-align: center;
color: white;
}
footer {
background-color: #7481AD;
color: white;
text-align: center;
padding: 14px;
}
.title {
margin: 0;
}
.unordered_list {
list-style: none;
}
/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}
.div-content,
.div-list {
padding: 0.75em;
border-radius: 12px;
margin-bottom: 1em;
}
.div-content p,
.div-list .unordered_list {
margin-top: 0.3125em;
padding: 0 0.625em;
}
.div-content {
background-color: #25476c;
}
.div-list {
background-color: #564B75;
width: 50%;
margin: 0 10px;
}
/* LAYOUT */
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
margin: 10px 0;
}
.div-content {
width: 50%;
margin: 0 10px;
}
.grow {
width: 100%;
}
.div-list {
flex-grow: 1;
}
footer {
flex-shrink: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>CSS Basics</title>
<!--
Go to this link:
http://www.cssdrive.com/imagepalette/index.php
-->
</head>
<body>
<header>
<h1 class="title">CSS Basics</h1>
</header>
<div class="content">
<div class="row">
<div class="div-content item-1">
<h2>What is Lorem Ipsum?</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="div-content item-2">
<h2>Diego Salas</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<div class="row">
<div class="div-content grow">
<h2>Diego's Favorite Dogs</h2>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.
</p>
</div>
</div>
<div class="row">
<div class="div-list">
<h2>Diego's Favorite Programming Language</h2>
<ul class="unordered_list">
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
<li>JavaScript</li>
</ul>
</div>
<!-- <img src="img/img1.jpg" alt="Mountain">-->
<div class="div-content">
<h2>Why do we use it?</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
<footer>
<p>CSS Basics © Diego Salas</p>
</footer>
</body>
</html>