I have figured out how to set two HTML elements side by side. I want to have a text paragraph on the left and an image on the right.
Currently, my code is:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<div style="width: 50%; height: 100px; float: left;" >
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
</div>
</body>
</html>
This is results in an two column layout, but I want to know how to format.
I want to add padding to the text, but when I do so, the image is messed up completely. How can I padding padding to my text so that there is space around it? I tried to add padding:20px; to the <div> that has the text which doesn't work.
<div style="width: 50%; height: 100px; float: left; padding:20px;">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
Use Grid with a media query for smaller screens:
article {
display: grid;
}
div {
padding: 0.5em;
}
img {
width: 100%;
}
#media (min-width: 400px) {
article {
grid-template-columns: 50% 50%;
}
}
<article>
<div>
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<img src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</article>
use box-sizing:border-box, after applying padding, so the padding will be calculated within the width
For more info Reference
<div style="width: 50%; height: 100px; float: left; padding:20px;box-sizing:border-box" >
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
</div>
The best way to do this is to wrap both <div> inside a flex-box. And adding border-box as value for box-sizing property. You can read more about box-sizing here: Box Sizing and about Flex Box here. Both are pretty useful to placing items side by side.
Here is a sample code.
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
</style>
<body>
<div style="display: flex; flex-direction: row; width: 100%;">
<div style="width: 50%; height: 100px; padding:20px;">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit
egestas
dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum
facilisis.
</p>
</div>
<div style="width: 50%; padding: 20px;">
<img style=" max-width: 100%; height: auto;"
src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" />
</div>
</div>
</body>
</html>
The box-sizing will prevent your image from changing position when adding padding to the div. And flex-box is much better way to position things instead of float as it offers more functionality and can also position things vertically.
Here is another great article related to Flex Box - Must Read.
You can use this example for side by side
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
Using flex makes it really simple to control the layout.
.container {
display: flex;
height: max-content;
gap: 1rem;
}
.flex-item {
flex: 1;
width: 50%;
}
.info {
height: 100px;
padding: 20px;
}
.image {
display: inline-block;
height: 150px;
width: 250px;
padding: 20px;
}
<div class="container">
<div class="flex-item info">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div class="flex-item">
<div><img class="image" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</div>
</div>
</div>
Related
I have a flexbox in my HTML, and I have two columns. What I have trouble doing is changing the right column's width. If I set the width to, say, width: 50%, the .container is no longer centered on the page, and the Google Maps size is also changed. I am trying to shrink the .container size but keep the whole flexbox centered on the page and the size of the maps the same. Any help would be greatly appreciated.
#google-maps
{
background: #FFFFFF;
}
.hours-and-location
{
}
#hours-and-location-container
{
display: flex;
flex-direction: row;
justify-content: center;
margin: 3em;
width: 50%;
}
.column
{
display: flex;
flex-direction: column;
margin: 1em;
}
.locations
{
width: 100%;
}
.page-title-header
{
text-align: center;
}
<h1 class="page-title-header">
Hours and Locations
</h1>
<div id="hours-and-location-container">
<iframe class="column" id="google-maps"
src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F"
width="600" height="500">
</iframe>
<div class="hours-and-location">
<div class="locations column">
<h2>
Locations
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</p>
<p>
Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed
elementum tempus egestas sed.
</p>
<p>
Lectus quam id leo in vitae turpis massa sed.
</p>
<p>
Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing
commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor
nec feugiat nisl.
</p>
</div>
<div class="hours">
</div>
</div>
</div>
I think you're looking for this
#google-maps
{
background: #FFFFFF;
}
.hours-and-location
{
width:40vh
}
#hours-and-location-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items:center;
margin: 3em;
}
.column
{
margin: 1em;
}
.page-title-header
{
text-align: center;
}
<h1 class="page-title-header">
Hours and Locations
</h1>
<div id="hours-and-location-container">
<iframe class="column" id="google-maps"
src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F"
width="600" height="500">
</iframe>
<div class="hours-and-location">
<div class="locations column">
<h2>
Locations
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</p>
<p>
Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed
elementum tempus egestas sed.
</p>
<p>
Lectus quam id leo in vitae turpis massa sed.
</p>
<p>
Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing
commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor
nec feugiat nisl.
</p>
</div>
<div class="hours">
</div>
</div>
</div>
you can assign a max- width on your flex div then wrap them in a another div that control to center them like below.
#google-maps
{
background: #FFFFFF;
}
.hours-and-location
{
}
#hours-and-location-container
{
display: flex;
flex-direction: row;
justify-content: center;
margin: 3em;
max-width: 700px;
gap: 10px;
}
.wrapper {
display:flex;
justify-content: center;
}
.column
{
display: flex;
flex-direction: column;
margin: 1em;
}
.locations
{
width: 100%;
}
.page-title-header
{
text-align: center;
}
<h1 class="page-title-header">
Hours and Locations
</h1>
<div class="wrapper">
<div id="hours-and-location-container">
<iframe class="column" id="google-maps"
src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F"
width="600" height="500">
</iframe>
<div class="hours-and-location">
<div class="locations column">
<h2>
Locations
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</p>
<p>
Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed
elementum tempus egestas sed.
</p>
<p>
Lectus quam id leo in vitae turpis massa sed.
</p>
<p>
Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing
commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor
nec feugiat nisl.
</p>
</div>
<div class="hours">
</div>
</div>
</div>
</div>
Well, I have given margin: 0 auto; for making it to centre in any width from left to right it always takes the element to centre from the left and right. I hope this might will help or you are looking for something else?
#google-maps
{
background: #FFFFFF;
}
.hours-and-location
{
}
#hours-and-location-container
{
display: flex;
flex-direction: row;
justify-content: center;
margin: 3em;
width: 50%;
margin: 0 auto;
}
.column
{
display: flex;
flex-direction: column;
margin: 1em;
}
.locations
{
width: 100%;
}
.page-title-header
{
text-align: center;
}
<h1 class="page-title-header">
Hours and Locations
</h1>
<div id="hours-and-location-container">
<iframe class="column" id="google-maps"
src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F"
width="600" height="500">
</iframe>
<div class="hours-and-location">
<div class="locations column">
<h2>
Locations
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</p>
<p>
Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed
elementum tempus egestas sed.
</p>
<p>
Lectus quam id leo in vitae turpis massa sed.
</p>
<p>
Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing
commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor
nec feugiat nisl.
</p>
</div>
<div class="hours">
</div>
</div>
</div>
I'm quite very new to HMTL and CSS, having just coded in C# before.
I got this fiddle here
https://jsfiddle.net/4asrj9x6/24/
<html>
<header>
<body>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
What I want to accomplish is to move in my nav bar links from the right edge. So that the end of 'About' is sort of aligned with the end of the third image.
What I've tried is to add a lot of padding to the navigation class. However this feels super gimmicky and it doesn't scale well at all. Since as soon as you move the window even a tiny bit it goes all wrong.
There should be a better way to do this but I feel kind of stuck.
You have to give your nav-bar a width to work with, since you have justify-content set to flex-end it will always be on the end depending on the width you have set.
Give your nav-bar a reasonable width and line in up with the third image.
Final code:
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
width: --your-desirable-width;
margin-right: auto;
}
This is responsable and it'll always be ..% of the screen.
so this should be what you are looking for, I have used css position: sticky; and have added only 2 lines of code in the styling of the header
<html>
<body>
<style>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
position: sticky;
top: 0;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
</style>
<header>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>
When I set the .sidebar width to be 100%, it gets smaller than before.
However, when I remove the body's font-size: 1.3rem and toggle the .sidebar's width: 100%, it gets slightly larger.
I know that when we set the font-size to be 1.3rem, .primary-content's horizontal width (if it didn't wrap) should still be the same ratio as the .sidebar's width (if it didn't wrap).
So I'm not sure how flexbox calculates width: 100%
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
/* width: 100%; */
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
Here's the codepen.
https://codepen.io/Fullchee/pen/OJMBovq
It's all about the initial width here. To understand this let's take another simple example with less code:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
It's trivial, that the second case seems a bit strange because the width is reduced but this is logical.
First, you should notice that both elements have the same content and the content need to wrap inside each one because there is not enough space.
If we reduce the content it will be different:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div>
Lorem ipsum dolor sit amet,
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet,
</div>
</div>
To understand both cases, you need to understand the flexbox algorithm that I will summarize in 3 points:
We first set the initial width of each element
If the total width is bigger that the container width, we shrink both elements
The shrink factor consider the negative free space (total width - container width) and the width of each element.
The trick is in the (1).
Without width:100% we will have the following in (1)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Both elements have the same width so both will shrink the same way to get the following:
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Now if you make the second element width:100% it will have a smaller initial width
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
The first one is almost 3 times bigger than the second one thus they will not shrink the same way and at the end the second will remain smaller (it will be kept at almost 3 times smaller)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Same logic apply to your code!
The same logic also apply when smaller content is used but in this case width:100% can make the initial width of the second item bigger so we end having a bigger element (like in the second snippet above)
Some related questions where you will get more details around the calculation and the flexbox algorithm:
How flexbox calculates flex-item's width if no flex-basis or width are set?
Why is a flex item limited to parent size?
The unpredictable wrapping habits of CSS
In case you want to increase the width of your element you can make the first element to shrink more:
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
<main class="main container row">
<section class="primary-content" style="flex-shrink:1.2;">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
You can also define flex-shrink for both and make sure it's bigger for the first element:
PS: Total Beginner
How do i get to display html code in 2 columns so browser reads it as normal text?
My columns wont display properly, and the " ... " not displaying properly either, I need it to have 2 space spots on each side, but browser only displays one, here is the code in HTML i have so far:
span {
font-family: Courier New;
monospace;
font-size: 23px;
color: rgb(215, 104, 113);
}
body {
background-color: rgb(40, 44, 52);
color: white;
}
.row {
display: flex;
}
.column {
flex: 50%;
}
<div class="section_body">
<h2 class="section">Document Summary</h2>
<div class="row">
<div class="column"></div>
<h3><<span>html1</span>>...<<span>/html1</span>></h3>
<div class="column"></div>
<h3><<span>html2</span>> ... <<span>/html2</span>></h3>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Disclosure: this is a snip from someone who made an HTML Cheat Sheet and I am just trying to recreate it in HTML & CSS as practice since i am a beginner.
Thank you.
Snip of the HTML Cheat Sheet
Your columns are working correctly; you just haven't placed your content inside of the container divs. Please see below for a working copy, and keep up the hard work in learning the language!
span {
font-family: Courier New;
font-size: 23px;
color: rgb(215, 104, 113);
}
body {
background-color: rgb(40, 44, 52);
color: white;
}
.row {
display: flex;
flex-direction:row;
justify-content:center;
}
.column {
flex: 48%;
margin:0 1%;
}
<div class="section_body">
<h2 class="section">Document Summary</h2>
<div class="row">
<div class="column">
<h3><<span>html</span>> ... <<span>/html</span>></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="column">
<h3><<span>html</span>> ... <<span>/html</span>></h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
JSFiddle
Indeed, your content was out of the 2 column divs. That should work better.
<div class="section_body">
<h2 class="section">Document Summary</h2>
<div class="row">
<div class="column">
<h3><<span>html1</span>>...<<span>/html1</span>></h3>
</div>
<div class="column">
<h3><<span>html2</span>> ... <<span>/html2</span>></h3>
</div>
</div>
</div>
You can use this code
body {
margin: 0;
padding: 0;
background-color: #282c34;
color: white;
font-family: Roboto;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
span {
font-family: Courier New;
font-size: 23px;
color: rgb(215, 104, 113);
}
h2 {
text-align: center;
background-color: #2c323c;
padding: 10px;
color: #abb2bf;
}
p {
line-height: 25px;
}
<div class="section_body">
<h2 class="section">Document Summary</h2>
<div class="row">
<div class="column">
<h3><<span>html</span>>...<<span>/html</span>></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
</div>
<div class="column">
<h3><<span>title</span>> ... <<span>/title</span>></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
</div>
<div class="column">
<h3><<span>head</span>>...<<span>/head</span>></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
</div>
<div class="column">
<h3><<span>body</span>> ... <<span>/body</span>></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
</div>
</div>
</div>
Today I tried out this slider and discovered a weird behaviour if an element above the slider is flexbox. The slider just doesn't count in the max-width.
In the codepen example https://codepen.io/obendev/pen/wbzXEa I tried showing it to you as best as possible.
var swiper = new Swiper(".swiper-container", {
// spaceBetween: "8px",
loop: true
});
* {
box-sizing: border-box;
margin: 0;
outline: none;
padding: 0;
}
html {
font-family: "Google Sans", sans-serif;
font-size: 16px;
font-weight: 400;
}
body {
background: #fff;
}
.site-width {
border: 2px solid #f44336;
margin: 2rem auto;
max-width: 80rem;
padding: 3.125rem;
}
.c-text-slider {
display: flex;
justify-content: space-between;
}
.c-text-slider__text {
border: 2px solid #f44336;
max-width: 200px;
padding: 0.5rem;
}
.c-text-slider__slider {
border: 2px solid #f44336;
padding: 0.5rem;
}
.c-text-slider__text + .c-text-slider__slider {
margin-left: 0.5rem;
}
.myelement {
border: 2px solid #f44336;
padding: 0.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="site-width">
<div class="c-text-slider">
<div class="c-text-slider__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
</div>
<div class="c-text-slider__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide myelement">
<p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
When using spaceBetween it does fit in the given size, although than I can't slide properly anymore.
I could give the upper element an max-width as well but this just doesn't feel right. Is this a bug or am I doing something wrong?
Here are 2 screenshots as well:
When visiting the site:
(source: legilimens.de)
After page resize:
(source: legilimens.de)
The property spaceBetween is a number and instead of giving 8px you can just give 8. The overflow issue is because the container of the swiper is a flex item and the default size is as much as its contents - so you can override this behaviour using min-width: 0.
See complete demo below and updated codepen:
var swiper = new Swiper(".swiper-container", {
spaceBetween: 8,
loop: true
});
* {
box-sizing: border-box;
margin: 0;
outline: none;
padding: 0;
}
html {
font-family: "Google Sans", sans-serif;
font-size: 16px;
font-weight: 400;
}
body {
background: #fff;
}
.site-width {
border: 2px solid #f44336;
margin: 2rem auto;
max-width: 80rem;
padding: 3.125rem;
}
.c-text-slider {
display: flex;
justify-content: space-between;
}
.c-text-slider__text {
border: 2px solid #f44336;
max-width: 200px;
padding: 0.5rem;
}
.c-text-slider__slider {
border: 2px solid #f44336;
padding: 0.5rem;
min-width: 0;
}
.c-text-slider__text + .c-text-slider__slider {
margin-left: 0.5rem;
}
.myelement {
border: 2px solid #f44336;
padding: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<div class="site-width">
<div class="c-text-slider">
<div class="c-text-slider__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
</div>
<div class="c-text-slider__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - read more details here:
Why don't flex items shrink past content size?
You can see some examples of this behavior:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow