This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I have found lots of guides and examples on how to make dropcaps with CSS, but they all fail when used with very short paragraphs. The concept is simple:
<style>
p::first-letter {
float: left;
font-size: 48pt;
}
</style>
<p>
Lorem ipsum dolor sit amet,
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
https://codepen.io/MadsSkjern/pen/vYLPaVo
Works well most of the time
But not with short paragraphs
How can I make a solution that also works with short paragraphs?
Related
Image
As you can see in image, I'd like the image to be positioned to the right of the text block. I have read this post, except my code is different.
<section>
<img src="images/default-image.png" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</section>
In that answer, thirtydot's is using div's, and when I try thirtydot's code, the page looks like a horrible mess.
How do I solve this? Thank you!
Use display: flex property on section and put h2 p tags in a separate tag . Also just put the img element below the h2 p element as shown in snippet .
You can read here for more about display: flex
section {
display: flex
}
.imgTag{
width:50vw;
height:50vh
}
<section class="post-container">
<span>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>
<img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>
Update:
As user need some help within his code
Use some breathing area for text if you want image to be big like increasing width of section here done (1000px) . Also to center it use display: block with margin: auto
#import url("https://fonts.googleapis.com/css2?family=Yomogi&family=Zen+Kaku+Gothic+New:wght#300;400;500&display=swap");
:root {
--white: #fff;
--dark-grey: #2f3c4f;
--green: #23966c;
--yellow: #faaa54;
}
body {
background-color: var(--dark-grey);
color: var(--white);
}
h2 {
font-family: "Zen Kaku Gothic New", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
/* font-size: 40px; */
color: var(--yellow);
}
p {
font-family: "Yomogi", sans-serif;
/* font-size: 30px; */
color: white;
}
section {
display: block;
margin: auto;
width: 1000px;
display: flex;
}
.imgTag {
width: 50vw;
height: 50vh;
}
<section>
<span>
<h2 style="font-size:40px">Lorem Ipsum</h2>
<p style="font-size:30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>
<img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>
Using a grid is an option. You can read more about it here
.post-container {
display: grid;
grid-template-areas:
"header image"
"paragraph image";
}
.post-container>h2 {
grid-area: header;
}
.post-container>p {
grid-area: paragraph;
}
.post-container>img {
grid-area: image;
}
<section class="post-container">
<img src="https://via.placeholder.com/150" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</section>
Using flex display.
If you need the image to be on the left of the flex container, then you can use row for the value of the flex-direction property for the section selector.
section, div {
display:flex;
flex-direction:row-reverse;
margin:20px;
}
div {
flex-direction:column;
}
<section class="post-container">
<img src="https://picsum.photos/200/300" />
<div>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</div>
</section>
<section class="post-container">
<div>
<h2>Lorem Ipsum</h2>
<p> Lorem Ipsum... </p>
</div>
<div>
<img src="images/default-image.png" />
</div>
</section>
Adding a flex display to post-container should fix the problem. If not you'd have to manually position the image in CSS file. Not sure if that's a good practice.
.post-container {
display: flex
}
Background
I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS library if it may help to solve the issue.
Problem description
I'm trying to implement a very basic multi-column layout. Everything works fine except for the fact that I can not avoid widowed headers. The break-after: avoid instruction does not work for some reason.
Problem Illustration
Code example
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
height: 300px;
column-fill: auto;
column-width: 150px;
}
h1 {
break-after: avoid;
}
</style>
</head>
<body>
<div class="columns">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
Questions
Why is it not working as expected?
Am I doing something wrong according to the W3C specs or is it a lack of browser support?
Are there any ways/tools to work this around?
I'm having an issue with Chrome when I use the column-count property. I have a div where inside it I will have some items so I set column-count: 3;
When I have 3 items or more it works well, but when I have only two they are not shown in the same row but in the same column. This happens only on Chrome.
code example:
.userinfo-content .grid-view.author-profile-tabs {
.column-count(3);
.column-gap(30);
.article {
position:relative;
display: inline-block;
margin-bottom: 40px;
width: 100%;
line-height: 1.3;
}
}
Based on how your markup looks like, the break-inside: avoid-column; should fix that, together with usingdisplay: block instead of display: inline-block (and you can drop width: 100%)
.outer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
.inner {
position: relative;
display: block;
margin-bottom: 40px;
line-height: 1.3;
break-inside: avoid-column;
}
.inner:nth-child(even) {
background: lightgray;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
Updated based on a comment
In this case, to defeat that bottom margin issue, you need a wrapper so you can give the outer a negative margin-top, and then you use margin-top on the items instead of margin-bottom.
.outer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
margin-top: -30px;
}
.inner {
position: relative;
display: block;
margin-top: 30px;
line-height: 1.3;
break-inside: avoid-column;
}
.inner:nth-child(even) {
background: lightgray;
}
<div class="wrapper">
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
If it's a 3 columns layout you want, flexbox does that better and have better browser support
.outer {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 20px;
}
.inner {
width: calc(33.33% - 20px);
margin: 0 20px 20px 0;
line-height: 1.3;
}
.inner:nth-child(even) {
background: lightgray;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
I've tried to resolve this problem for a while so I need your help Stackoverflow..
I have a template with 2 columns (with bootstrap grid system) like that :
http://snag.gy/Vh9Do.jpg
And I would like something like that :
http://snag.gy/cYIlo.jpg
My html looks like that for the moment :
<div class="container-fluid">
<div class="row">
<div class="post-container column-md-6" id="post-1">
content...
</div>
<div class="post-container column-md-6" id="post-2">
content...
</div>
</div>
<div class="row">
<div class="post-container column-md-6" id="post-3">
content...
</div>
<div class="post-container column-md-6" id="post-14">
content...
</div>
</div>
[...]
</div>
Do you have any idea how could I do that ? (without breaking the post order in the page, because their is only one column in portrait orientation)
You wont be able to do that only with html, you need add some JS and for that there is many good plugins (one example: http://www.akshitsethi.me/pinterest-like-grid-layout-using-jquery/)
Another option (if you don`t need IE support - 10% of the users):
CSS3 Collumn. Easy and clean:
Check out this fiddle > http://jsfiddle.net/luckmattos/aExxp/1/ or www.w3schools.com "css3_multiple_columns" or...
HTML
<div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
CSS
div {
width:500px;
padding:10px;
background:#ccc;
/* Number of COLS */
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
/* Distance between COLS */
-moz-column-gap:10px; /* Firefox */
-webkit-column-gap:10px; /* Safari and Chrome */
column-gap:10px;
}
.item1 {
background:#f00;
height:100px;
padding: 3px;
margin:10px;
display:inline-block;
}
.item2 {
background:#0f0;
height:150px;
padding: 3px;
margin:10px;
display:inline-block;
}
.item3 {
background:#00f;
height:100px;
padding: 3px;
margin:10px;
display:inline-block;
}
Without a jsfiddle to play around with, as a guess maybe try removing the .row elements, so something like this:
<div class="container-fluid">
<div class="post-container column-md-6" id="post-1">
content...
</div>
<div class="post-container column-md-6" id="post-2">
content...
</div>
<div class="post-container column-md-6" id="post-3">
content...
</div>
<div class="post-container column-md-6" id="post-14">
content...
</div>
[...]
</div>
If that doesn't work (my appologies) then I recommend using Masonry: http://masonry.desandro.com/options.html
Here are a bunch of examples that use Masonary: http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/
<div class="main">
<div class="content">
<div class="content_hide">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="sidebar">
<div class="single_sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
This is my HTML code. When I hover single_sidebar element, I want style content_hide div. something like
.single_sidebar:hover ##content_hide {background:red}
How can I select content_hide div by CSS when I hover single_sidebar?
Currently there's no way to do so in CSS. Maybe only in CSS4 with !.
You will have to incorporate JavaScript.
Just as an example, in jQuery:
$(".single_sidebar").on("mouseenter mouseleave", function(event) {
$(this).closest(".main").find(".content_hide").toggleClass("someStyleClass");
});