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
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 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>
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>
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>
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-->