So what I want is for the background image to stay where it is (and not change size according to the amount of content), and for the left column to scroll and (if possible!) the right column to stay put.
#import url(http://fonts.googleapis.com/css?family=Special+Elite);
/*font-family: 'Special Elite', cursive;*/
#import url(http://fonts.googleapis.com/css?family=Pacifico);
/*font-family:'Pacifico', cursive;*/
body {
height: 100%;
}
#background {
background-image: url('http://hd4desktop.com/images/b/1920x1080_pathway_in_forest-1211697.jpg');
width: 100%;
height: 100%;
background-position: center fixed;
background-size: cover;
}
.navbar {
position: fixed;
width: 100%;
z-index: 1;
}
ul {
text-align: center;
background-color: #7A4909;
margin-top: 10px;
}
li {
list-style: none;
margin-right: 1em;
font-family: 'Special Elite', cursive;
font-size: 35px;
padding: 12px;
display: inline-block;
}
li a {
color: #D0903C;
background-color: #7A4909;
text-decoration: none;
display: inline-block;
}
.left a:hover {
color: #7A4909;
background-color: #D0903C;
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
text-transform: uppercase;
}
.right a:hover {
color: #7A4909;
background-color: #D0903C;
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);
text-transform: uppercase;
}
#wrap {
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
padding-top: 90px;
}
#content {
width: 700px;
background-color: #D09B54;
float: left;
opacity: 0.6;
}
#sidebar {
width: 200px;
float: left;
background-color: #D0903C;
}
#sidebar ul li {
font-size: 20px;
}
h1 {
text-align: center;
font-family: 'Pacifico', cursive;
}
p {
font-family: 'Dawning of a New Day', cursive;
}
<body id="background">
<ul class="navbar">
<li class="left">Home
</li>
<li class="right">Contact Me
</li>
<li class="left">Blog
</li>
<li class="right">Funny
</li>
</ul>
<div id="wrap">
<div id="content">
<h1>Lorem Ipsum!</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
</p>
</div>
<!--end content div-->
<div id="sidebar">
<ul>
<li>Blog1
</li>
<li>Blog1
</li>
<li>Blog1
</li>
<li>Blog1
</li>
<li>Blog1
</li>
</ul>
</div>
<!--end sidebar div-->
So I figured it out on my own eventually...
I removed the background's height and width and added background attachment:fixed.
In order to get my right column to stay put I used #sidebar ul {position:fixed;} but it wasn't the right width anymore so I had to assign a width of 200px to it again.
#import url(http://fonts.googleapis.com/css?family=Special+Elite);
/*font-family: 'Special Elite', cursive;*/
#import url(http://fonts.googleapis.com/css?family=Pacifico);
/*font-family:'Pacifico', cursive;*/
body {
height: 100%;
}
#background {
background-image: url('http://hd4desktop.com/images/b/1920x1080_pathway_in_forest-1211697.jpg');
background-position: center fixed;
background-size: cover;
**background-attachment:fixed;**
}
.navbar {
position: fixed;
width: 100%;
z-index: 1;
}
ul {
text-align: center;
background-color: #7A4909;
margin-top: 10px;
}
li {
list-style: none;
margin-right: 1em;
font-family: 'Special Elite', cursive;
font-size: 35px;
padding: 12px;
display: inline-block;
}
li a {
color: #D0903C;
background-color: #7A4909;
text-decoration: none;
display: inline-block;
}
.left a:hover {
color: #7A4909;
background-color: #D0903C;
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
text-transform: uppercase;
}
.right a:hover {
color: #7A4909;
background-color: #D0903C;
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);
text-transform: uppercase;
}
#wrap {
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
padding-top: 90px;
}
#content {
width: 700px;
background-color: #D09B54;
float: left;
opacity: 0.6;
}
#sidebar {
width: 200px;
float: left;
background-color: #D0903C;
}
**#sidebar ul {
position:fixed;
width:200px;
}**
#sidebar ul li {
font-size: 20px;
}
h1 {
text-align: center;
font-family: 'Pacifico', cursive;
}
p {
font-family: 'Dawning of a New Day', cursive;
}
<body id="background">
<ul class="navbar">
<li class="left">Home
</li>
<li class="right">Contact Me
</li>
<li class="left">Blog
</li>
<li class="right">Funny
</li>
</ul>
<div id="wrap">
<div id="content">
<h1>Lorem Ipsum!</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
</p>
</div>
<!--end content div-->
<div id="sidebar">
<ul>
<li>Blog1
</li>
<li>Blog1
</li>
<li>Blog1
</li>
<li>Blog1
</li>
<li>Blog1
</li>
</ul>
</div>
<!--end sidebar div-->
Related
I know that position:sticky makes the element sticky to its direct parent. But is it somehow still possible to make it sticky to its grandparent?
Here i have tried to create a jsfiddle:
https://jsfiddle.net/n3ozx2rL/6/
I want both my search-bar and the firstsection stick to the whole page (.content). And at the end after some scrolling i would like to have sth. like this:
At the moment, the firstsection keeps its stickiness since it is the direct child of content. But not the seasrch-bar, which stays sticky just within its direct parent "header".
Here is the code again since SO asks for it:
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100px;
background-color: orange;
margin-bottom: 10px;
}
.search-bar {
padding: 5px;
position: sticky;
top: 0;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 0;
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>
Try this. Didn't made sticky to grandparent, but got the expected design in that screenshot.
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100px;
background-color: orange;
margin-bottom: 10px;
position:sticky;
top:-70px;
}
.search-bar {
padding: 5px;
position: sticky;
top: 0px;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 30px;
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>
Here is another hack using negative margin and big height:
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100%; /* as big as content */
background: linear-gradient(orange,orange) top/100% 100px no-repeat; /* color only 100px of height */
margin-bottom: 10px;
margin-bottom:-900px; /* negative margin here */
}
.search-bar {
padding: 5px;
position: sticky;
top: 0;
background:orange;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 30px; /* adjust this */
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>
I am trying to get a scrollbar working for about 30 minutes now. I read forums and stuff, and I guess it has something to do with my website height. I want the scrollbar only be visible on the <main> tag. I first thought I just haven't enough content, but after adding lorem ipsum text I really don't know, what the reason could be.
The Code:
body,
html {
background-color: aquamarine;
height: 100%;
overflow-y: hidden;
}
#Wrapper {
margin-left: 15%;
margin-right: 15%;
}
header {
background-color: blueviolet;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 80;
padding: 0 1rem;
border-radius: 0em 0em 1em 1em;
}
#branding {
margin: 0;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: lawngreen;
}
.nav {
display: flex;
flex: 0 1 20%;
justify-content: space-between;
align-items: center;
}
.navitem {
list-style: none;
}
.navitem a {
margin-top: 0;
color: black;
text-decoration: none;
font-family: 'Anton', sans-serif;
}
.navitem a:hover {
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
main {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
height: 100vh;
min-height: 100%;
background-color: white;
margin: 0;
margin-right: auto;
margin-left: auto;
overflow-y: scroll;
border: 1px solid Maroon;
border-top: 0px;
}
main h2 {
margin: 1em;
font-family: 'Anton', sans-serif;
}
main h4 {
font-size: 2em;
}
table {
padding: 1.5em;
background-color: lightgray;
}
table tr {}
table td {
padding: 2em;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Einfache-Rezepte</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Bhaijaan|Gloria+Hallelujah|PT+Sans+Narrow|Righteous|Titillium+Web|Yanone+Kaffeesatz" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<meta name="description" content="Diese Seite wird im Laufe der Zeit (hoffentlich) Rezepte beinhalten">
</head>
<body>
<div id="Wrapper">
<header>
<h1 id="branding">Einfache-Rezepte</h1>
<ul class="nav">
<li class="navitem">Startseite</li>
<li class="navitem">Rezepte</li>
<li class="navitem">Kontakt</li>
</ul>
</header>
<main>
<h2>Einfache Rezeptideen für jeden leicht zu machen!</h2><br>
<h4>Top Rezepte der Woche</h4>
<table>
<tbody>
<tr>
<th>Nummer</th>
<th>Gericht</th>
<th>Zeit</th>
<th>Bild</th>
</tr>
<tr>
<td>Nummer</td>
<td>Gericht</td>
<td>Zeit</td>
<td>Bild</td>
</tr>
</tbody>
</table>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
</main>
</div>
</body>
</html>
CodePen: https://codepen.io/anon/pen/OBKENL
PS: On the CodePen it seems to work?!
PPS: It'S working on the CodePen, but I can't scroll to the bottomest. There is more Lorem Text within the HTML.
The wrapper should be 100vh not "main". main should be 100vh - the height of the header. I've also removed the min-height: 100% from main. And you should use overflow-y: auto instead of scroll in case you don't have enough content.
body,
html {
background-color: aquamarine;
height: 100%;
overflow-y: hidden;
margin: 0;
}
#Wrapper {
margin-left: 15%;
margin-right: 15%;
height: 100vh;
}
header {
background-color: blueviolet;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 80;
padding: 0 1rem;
border-radius: 0em 0em 1em 1em;
height: 56px;
}
#branding {
margin: 0;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: lawngreen;
}
.nav {
display: flex;
flex: 0 1 20%;
justify-content: space-between;
align-items: center;
}
.navitem {
list-style: none;
}
.navitem a {
margin-top: 0;
color: black;
text-decoration: none;
font-family: 'Anton', sans-serif;
}
.navitem a:hover {
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
main {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
height: calc(100vh - 56px);
background-color: white;
margin: 0;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
border: 1px solid Maroon;
border-top: 0px;
}
main h2 {
margin: 1em;
font-family: 'Anton', sans-serif;
}
main h4 {
font-size: 2em;
}
table {
padding: 1.5em;
background-color: lightgray;
}
table tr {}
table td {
padding: 2em;
}
<div id="Wrapper">
<header>
<h1 id="branding">Einfache-Rezepte</h1>
<ul class="nav">
<li class="navitem">Startseite</li>
<li class="navitem">Rezepte</li>
<li class="navitem">Kontakt</li>
</ul>
</header>
<main>
<h2>Einfache Rezeptideen für jeden leicht zu machen!</h2><br>
<h4>Top Rezepte der Woche</h4>
<table>
<tbody>
<tr>
<th>Nummer</th>
<th>Gericht</th>
<th>Zeit</th>
<th>Bild</th>
</tr>
<tr>
<td>Nummer</td>
<td>Gericht</td>
<td>Zeit</td>
<td>Bild</td>
</tr>
</tbody>
</table>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
</main>
</div>
I have several flex-items within one flex-container:
<div class="flex-container">
<div class="flex-item flex-item-66">Box 1 | 66%</div>
<div class="flex-item flex-item-33">Box 2 | 33%</div>
<div class="flex-item flex-item-33">Box 3 | 33%</div>
<div class="flex-item flex-item-33">Box 4 | 33%</div>
<div class="flex-item flex-item-100">Box 5 | 100%</div>
</div>
Unfortunately Box 1 contains a lot of text. Boxes 2, 3 and 4 only have little text. Although Box 2, 3 and 4 would fit the height of Box 1, only Box 1 appears on the right of Box 1. The other Boxes are displayed below box (see picture for details).
Is there a way to make the boxes fill the vertical whitespace before they start in a new line?
My aim is, that box 3 and 4 appear directly below box 2. Only when they reach the same height as box 1, a new line should be opened.
The result should look like my second image:
/*********** General *******/
.flex-container {
background: none;
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
/** st_justifyContent START **/
.flex-justify-start {
justify-content: flex-start;
}
.flex-justify-end {
justify-content: flex-end;
}
.flex-justify-center {
justify-content: center;
}
.flex-justify-space-evenly {
justify-content: space-evenly;
}
/** st_justifyContent END **/
/** st_flexDirection START **/
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
/** st_flexDirection END **/
/*************** Single Item ***************/
/** st_width START **/
.flex-item {
box-sizing: border-box;
background-color: rgba(255,255,255,1);
padding: 20px;
margin: 10px;
border: 1px solid black;
}
.flex-item > .flex-container {
margin-bottom: 0;
}
.flex-item > .flex-container > .flex-item {
padding: 0;
}
.flex-item-width-25 {
width: calc(25% - 20px);
}
.flex-item-width-33 {
width: calc(33.33333% - 20px);
float: right;
}
.flex-item-width-50 {
width: calc(50% - 20px);
}
.flex-item-width-66 {
width: calc(66.66666% - 20px);
}
.flex-item-width-75 {
width: calc(75% - 20px);
}
.flex-item-width-100 {
width: calc(100% - 20px);
}
/** st_alignSelf START **/
.flex-align-self-start {
align-self: flex-start;
}
.flex-align-self-center {
align-self: center;
}
.flex-align-self-end {
align-self: flex-end;
}
.flex-align-self-stretch {
align-self: stretch;
}
<div class="flex-container flex-justify-end flex-row">
<div class="flex-item flex-item-width-66 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 1 | 66%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 2 | 33%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 3 | 33%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 4 | 33%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="flex-item flex-item-width-100 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 5 | 100%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
See below code I think you want like this.
/*********** General *******/
.flex-container {
background: none;
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
/** st_justifyContent START **/
.flex-justify-start {
justify-content: flex-start;
}
.flex-justify-end {
justify-content: flex-end;
}
.flex-justify-center {
justify-content: center;
}
.flex-justify-space-evenly {
justify-content: space-evenly;
}
/** st_justifyContent END **/
/** st_flexDirection START **/
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
/** st_flexDirection END **/
/*************** Single Item ***************/
/** st_width START **/
.flex-item {
box-sizing: border-box;
background-color: rgba(255,255,255,1);
padding: 20px;
margin: 10px;
border: 1px solid black;
}
.flex-item > .flex-container {
margin-bottom: 0;
}
.flex-item > .flex-container > .flex-item {
padding: 0;
}
.flex-item-width-25 {
width: calc(25% - 20px);
}
.flex-item-width-33 {
width: calc(33.33333% - 20px);
float: right;
}
.flex-item-width-50 {
width: calc(50% - 20px);
}
.flex-item-width-66 {
width: calc(66.66666% - 20px);
}
.flex-item-width-75 {
width: calc(75% - 20px);
}
.flex-item-width-100 {
width: calc(100% - 20px);
}
/** st_alignSelf START **/
/*.flex-align-self-start {
align-self: flex-start;
}*/
.flex-align-self-center {
align-self: center;
}
.flex-align-self-end {
align-self: flex-end;
}
.flex-align-self-stretch {
align-self: stretch;
}
<div class="flex-container flex-justify-end flex-row">
<div class="flex-item flex-item-width-66 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 1 | 66%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 2 | 33%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 3 | 33%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 4 | 33%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="flex-item flex-item-width-100 flex-align-self-start" style="order: 1; flex-grow: 1">
<h3 class="flex-item-title">Box 5 | 100%</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
I have the problem that my headings overlap. Here an example. I know that the problem is the line high that is set to 0:
h3 {
line-height:0;
letter-spacing:1px;
}
If I use line high:1 the problem disappears, but the space between the heading and the paragraph becomes too large and the page does not look very nice.
So what I would like to do is to have line high:1 for the heading and line high:0 for the space between the heading and the paragraph.
I hope anybody has a solution.
Thank you!
Just add margin-bottom of about 5px to your h3 heading
p {
margin:0;
padding:0;
line-height:1em;
}
h3 {
line-height:1;
letter-spacing:1px;
margin-bottom: 5px;
}
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</h3>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<br>
<h3>Ut wisi enim ad minim veniam</h3>
<p style="text-align: justify;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
I tried this in your JSFiddle example and it seems like what you want:
h3 {
line-height:1; /* put 1 here */
letter-spacing:1px;
margin-bottom:0px; /* add this line */
}
I'm working on a two-column layout with float: left; and float: right; on two containers. To visually seperate these to container, I'd like to draw a vertical line between them via a Pseudo-Element in the parent container.
My code:
.twocol {
position: relative;
}
.twocol.divided:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dashed #000;
}
.leftcol {
float: left;
width: 50%;
padding-right: 20px;
}
.rightcol {
float: right;
width: 50%;
padding-left: 20px;
}
Then the html:
<div class="twocol divided">
<div class="leftcol">...</div>
<div class="rightcol">...</div>
</div>
With top: 0; and bottom: 0; the pseudo-element is supposed to draw a line from top to bottom of the parent .twocol. But nothing happens.
Using the same rules of the pseudo-element on an additional html-element div.divider inside of .twocol works well and draws the line. Is this technique not possible with pseudo-elements or am I missing out on something?
Here a jsfiddle.net/tw1vp2dg with the not working pseudo- and the working html-element examples.
You have display: table from you .twocol:before selector.
Add display: block or another value different from table to styles of your pseudo-element or remove .twocol:before selector.
Example
your overwriting your rule with your clearfix trick., drop it and use overflow:hidden on main container instead.
http://jsfiddle.net/tw1vp2dg/1/
erase this :
.twocol:before,
.twocol:after {
content: "";
display: table;
}
and add this instead
.twocol {
overflow:hidden;
}
* {
box-sizing: border-box;
}
body {
padding: 5px;
}
.twocol {
position: relative;
margin-bottom: 45px;
overflow:hidden;
}
.twocol.divided:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dashed #000;
}
.leftcol {
float: left;
width: 50%;
padding-right: 20px;
}
.rightcol {
float: right;
width: 50%;
padding-left: 20px;
}
.divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dashed #000;
}
h1 {
font-size: 1.2em;
text-align: center;
}
// Clearfixing .twocol
.twocol {
zoom: 1;
}
.twocol:after {
clear: both;
}
<h1>Example with Pseudo-Element</h1>
<div class="twocol divided">
<div class="leftcol">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="rightcol">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer.
</div>
</div>
<h1>Example with HTML-Element</h1>
<div class="twocol">
<div class="divider"></div>
<div class="leftcol">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="rightcol">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer.
</div>
</div>