When I use the css ::first-letter to increase the font in the following way:
p:first-letter {
font-size: 400%;
}
It creates a gap between the first and the second line of the paragraph. Can you please suggest a solution to avoid this gap.
That's because they are aligned by their baseline, an the descenders in a large font size are much higher.
A good way to treat large first letters is to treat them as float elements (i.e. inside the text block) and adjust their height to the used regular font and font-size, like this:
p:first-letter {
font-size: 500%;
float:left;
}
<p class="first-letter">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
Your problem is located in line-height. If you wonder how line height actually works, I recommend you to read this article: http://joshnh.com/weblog/how-does-line-height-actually-work
p {
padding: 15px;
}
p:first-letter {
font-size: 400%;
line-height: 0;
padding-top: 20px;
}
<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.</p>
Related
I am wanting to fold general text when using bookdown in R.
There are plenty of ways to fold code.
There is some advice here for folding verbatim text which isnot quite the same thing, but perhaps a good starting point.
However, I cannot even get this verbatim-text folding to work, despite following (as far as I can tell) the advice given in response to that question.
On my Mac, the verbatim-text folding works... but issues this warning:
Warning messages:
1: In get_engine(options$engine) :
Unknown language engine 'fold' (must be registered via knit_engines$set()).
whenever I add this chunk. as advised:
```{fold}
Here I am
```
On Windows, the code does not produce any folding at all; the text appears, but no folding of said text.
In any case, the text appears verbatim (not surprisingly, given the instructions were for that), but ideally I would like to be able to fold general text.
Can anyone please offer advice? That is: How does one fold general text in R bookdown?
As background: I am new to bookdown, I know R well, but I don't know anything associated with javascript.
Perhaps someone in the know would be able to amend the original code given for folding verbatim text. Since code and verbatim text folding both seem possible, I live in hope that folding of general text may be relatively easy...
Thanks.
P.
The idea is the same as in the other answer. You just have to make the paragraphs to be folded identifiable by wrapping a div element around them. Take the following MRE:
---
title: "Hide Verbatim Blocks"
author: "Martin Schmelzer"
date: "June 22, 2018"
output:
bookdown::html_document2
---
<style>
.fold-btn {
float: right;
margin: 5px 5px 0 0;
}
.fold {
border: 1px solid black;
min-height: 40px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$folds = $(".fold");
$folds.wrapInner("<div class=\"fold-blck\">"); // wrap a div container around content
$folds.prepend("<button class=\"fold-btn\">Unfold</button>"); // add a button
$(".fold-blck").toggle(); // fold all blocks
$(".fold-btn").on("click", function() { // add onClick event
$(this).text($(this).text() === "Fold" ? "Unfold" : "Fold"); // if the text equals "Fold", change it to "Unfold"or else to "Fold"
$(this).next(".fold-blck").toggle("linear"); // "swing" is the default easing function. This can be further customized in its speed or the overall animation itself.
})
});
</script>
# Rmd file
<div class="fold">
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
</div>
As you can see, we wrapped a div container with class .fold around the text. The comments next to the JS snippet should clarify what is happening there.
For further styling you may add and alter the CSS as you wish.
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>
This question already has answers here:
How do I keep two side-by-side div elements the same height?
(24 answers)
Create a row of flexbox items with a max height defined by one child [duplicate]
(1 answer)
Closed 6 years ago.
Given the following markup:
<div class="wrapper">
<div id="one">
Some content
</div>
<div id="two">
Some content
</div>
</div>
What's the simplest way to make both divs the same height, which is the calculated height of #two (specifically, with the height auto but adhering to min-height)? So, if #two is longer than #one, #one should expand to match; if #two is shorter, #one should be cut off (and overflow according to its overflow setting).
I imagine flexbox may be my saviour here (as it so often is), but I can't work out how.
If the first container has an absolute child it takes away the document flow and it will always be controlled by the height of the second flex child. if you change the content of the #two to more you see it grows correctly. look here:
demo: http://codepen.io/anon/pen/NbWmdB
html:
<div class="wrapper">
<div id="one">
<div class="one-inner">
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.
</div>
</div>
<div id="two">
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. amet.
</div>
</div>
css:
.wrapper {
display:flex
}
#one {
background:red;
position:relative;
flex:1;
overflow:auto
}
.one-inner {
position:absolute;
}
#two {
background:green;
flex:1;
}
hope that helps
It's easy with flexbox:
Use a column layout so that the height is the main size
Force a line break after the first element, so that the flex items appear side by side
Set flex-basis: 0px to let it have no height initially, and then let it grow to fill the available space with flex-grow: 1.
Use some overflow different than visible. Or, if you want the contents to overflow, use min-height: 0.
.wrapper {
display: flex;
flex-flow: column wrap;
margin: 10px;
}
.one {
flex: 1 1 0px;
page-break-after: always;
break-after: always;
overflow: auto;
}
.one, .two {
border: 1px solid;
width: 50%;
}
<div class="wrapper">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
However, forced line breaks are not widely supported. So you can also try good old tables:
Add an inner wrapper to the first cell
Make it absolutely positioned. Since absolutely positioned elements are taken out-of-flow, their content have no impact on the height of the container.
Let it fill the relatively positioned cell completely with top, right, bottom, left.
.wrapper {
display: table;
width: 80%;
table-layout: fixed;
margin: 10px;
}
.one, .two {
display: table-cell;
position: relative;
border: 1px solid;
}
.one-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
<div class="wrapper">
<div class="one">
<div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
<div class="one">
<div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
Assuming I understand this correctly.
I personally like the padding-bottom with overflow as needed. I use this method a lot when adding div layers for responsive online designers and need to constrain all size by percentage.
.wrapper {display: flex; padding-bottom: 56.25%; overflow: hidden}
#one {background:green}
#two {background:yellow;}
<div class="wrapper">
<div id="one">
Some content<br>
Some content<br>
Some content<br>
Some content<br>
</div>
<div id="two">
Some content
</div>
</div>
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>
In this example http://dabblet.com/gist/708f69e9c5352f67f514 the heading "Article 1" is inconsistently pushed down, while it should appear on the same height as "Intro" and "Article 2". Where does this margin come from? When i change the h1-style to h1 {margin-top: 0} all headings appear horizontally aligned, but when i use higher values like h1 {margin-top: 60px} , then the inconsistency always appears. What's going on here? How can i use a margin without having this annoying inconsistency?
The Code:
.wrapper {
position: relative;
}
.left {
position: relative;
width: 380px;
}
.right {
position: absolute;
margin-left: 460px;
top: 0;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
column-gap: 40px;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
}
h1 {
margin-top: 36px;
}
<body>
<div class="wrapper">
<div class="left">
<article>
<h1>Intro</h1>
<p>Llorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</article>
</div>
<div class="right">
<article>
<h1>Article 1</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,.</p>
</article>
<article>
<h1>Article 1</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,.</p>
</article>
</div> <!-- ds-right -->
</div>
</body>
First you will need to reset any margin on the h1 and p tags like so p,h1{margin:0} then set the container for the floated columns to overflow:hidden which will container the floats