I am trying to use CSS column-count property. My current HTML structure consist of a parent 'div' with inner 'p' tag and I applied column-count: 3 to the div and it works fine. But for certain break points column count showing is 2 instead of 3. Can any one explain why count changes for certain break points and how content is divided in each column?
HTML
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
voluptatum nemo illum, numquam aperiam minus sit cumque
perspiciatis dicta, molestiae inventore reiciendis aut, officiis
nobis deserunt provident commodi sunt aliquam!</p>
</div>
CSS
.wrapper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Column layout exhibits the following default behavior (on Chrome 67):
Regardless of the column-count setting, columns won't be wrapped unless they have at least 2 lines, except if ...
... typesetting this way would result in at max half of the columns being used.
You can control the way columns get filled by specifying the CSS properties orphans and widows which specify the minimum number of lines a block container must show at the top or the bottom of a column, respectively.
A value of 1 allows for height balancing in columns even for text that would only span a single line.
Setting the value to an integer n means that all used columns but the last one must contain at least n lines of text. The default value is 2 for both properties.
Successively increasing the integer values leads to successively fewer layout columns used for any given text.
Demo
I've tried to set up a reproducible test setting container dimensions and font-sizes. As is it covers 6 columns. Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only.
<!DOCTYPE html>
<html>
<head>
<title>CSS column count demo</title>
<style type="text/css">
.wrapper {
border: solid 1px black;
font-family: Times New Roman;
font-size: 12pt;
width: 800px;
height: 400px;
}
.wrapper p {
column-count: 6;
orphans: 1;
widows: 1;
}
</style>
</head>
<body>
<!--
The following text covers 6 columns.
Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only.
-->
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
voluptatum nemo illum, numq</p>
</div>
</body>
</html>
Increase your data it will show in 3 columns. If data is not there how it can be split in 3 columns. You have to put enough data so that data under P tag will split in 3 columns.
Related
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have this situation, with two seperated card components, and it is nesseserly to add both headings same height.
Is it possible using only CSS?
<div class="card">
<div class="card__head">
<h4 class="heading4 c-white">
Heading
</h4>
</div>
<div class="card__body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
</p>
</div>
</div>
simple no by pure css you can not do this. you have to put fixed height which is not feasible. best way to go is matchHeight js and using display:inline-block; and vertical-align:middle.
1) you apply div structure and css according to codepen using inline-block. keep in mind that both title are in different columns
<div class="fa-title"><h4>heading 1</h4></div>
<div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>
2) apply js to that div for common height of both div.
`$('.fa-title').mathcHeight();`
http://brm.io/jquery-match-height-demo/
https://codepen.io/edge0703/pen/iHJuA
You want same height heading and if title is bigger then you need to hide overflow title text part using css.
You can use this css properties for heading section:
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
I think I have a wrong understanding of how specificity and !important works .
Consider the below HTML :
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class = "outer">
<div class = "inner1">
<div class = "inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam
quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia,
et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do
commodo..</p>
</div>
</div>
</div>
STYLE.CSS
.outer .inner1 {
color:green !important;
}
STYLE1.CSS
.outer .inner1 .inner2 {
color:red ;
}
My understanding was the rule in style.css will never be overwritten (as it has an important tag) even though the rule in syle1.css has more specificity .
I was thinking rules are applied as they are encountered in the HTML file ( style.css first and then style1.css) , and a value for a particular property of an element will be overwritten only if the rule is more specific ( important tag prevents this overriding no matter how specific the subsequent rule is ) . This apparently is not how it works . Could someone tell me how does !important and specificity work and when do you use !important ?
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
-- Specificity: Directly targeted elements vs. inherited styles
Note: the addition of the new contrived ruleset in Demo:
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
It has an incredibly ridiculously unnecessarily huge specificity score of 0,0,7,4 and !important as well. CSS reads from right to left:
Find an <aside> tag with the class of .inner3
It must have a parent <div> that has the class of .inner2.
Also that <div class="inner2">must have a parent <div> with a class of .inner1.
And it's imperative that <div class="inner1"> have a parent <div> with the class of .outer.
All of these specific rules of the selector must be met just so a deeply nested <aside> tag gets its style. Any descendant elements of .inner3 will inherit color: blue property and value, but it is easily overridden by the likes of i.inner2 with color:red.
<div class="inner3">
<p>This deeply nested text has <i class='inner2'>crazy specificity but this text is red.</i>
...
</p>
</div>
Note: the new ruleset at the bottom of CSS box:
div {
color: black !important
}
Now this selector is specific to all divs so here is how !important has just been assigned a selector with a far reaching scope. This is probably more like the behavior you were expecting.
BTW, you probably noticed the duplicate classes:
.outer.outer.outer
That is called selector chaining which will increase a selector's specificity score. See Online Specificity Calculator.
Demo
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
.outer .inner1 {
color: green !important;
}
.outer .inner1 .inner2 {
color: red;
}
div {
color:black !important;
}
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class="outer">
<div class="inner1">
This text will be green...
<div class="inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia, et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do commodo..
</p>
<aside class='inner3'>
<p>This deeply nested text has <i class='inner1'>crazy specificity</i>, yet it only applies to it and its descendants with no specific <b class='inner2'>`color` property</b>.</p>
</aside>
</div>
...and this text will be green as well.
</div>
</div>
Just for fun, I am trying to create a magazine style, two-column layout with CSS like in the image below:
I plan to do it by as many means as possible. Probably first with just some div's and float's. Then with the CSS table, then with a flexbox and finally with a CSS grid.
I don't even know if it is going to be possible with all, or any, but I am just trying.
So, here's what I've got till now.
I can't seem to get the picture quite in the center with the text all around it.
I am not necessarily looking for an answer with just floats, or just the CSS grid. I am really interested in looking for anything that does it because I think this is a nice challenging thing to try out. :-)
Here is the code on github and below is the code snippet.
:root {
margin-left: 8%;
margin-right: 8%;
}
#left, #right {
width: 40%;
}
#left {
margin-right: 4%;
float: left;
}
#right {
float: right;
}
p > span:first-of-type {
color: red;
margin-right: 2px;
}
#centerImage {
float: left;
src: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/image.png);
}
<h2>An do on frankness so cordially immediate recommend contained</h2>
<div id = "left">
<p><span>Para 1</span>He difficult contented we determine ourselves me am earnestly. Hour no find it park. Eat welcomed any husbands moderate.
Led was misery played waited almost cousin living. Of intention contained is by middleton am. Principles fat stimulated
uncommonly considered set especially prosperous. Sons at park mr meet as fact like.</p>
<p><span>Para 2</span>No comfort do written conduct at prevent manners on. Celebrated contrasted discretion him sympathize her collecting occasional.
Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch of no ye. Voice tried known
to as my to. Though wished merits or be. Alone visit use these smart rooms ham. No waiting in on enjoyed placing
it inquiry.</p>
<p><span>Para 3</span>Sentiments two occasional affronting solicitude travelling and one contrasted. Fortune day out married parties. Happiness
remainder joy but earnestly for off. Took sold add play may none him few. If as increasing contrasted entreaties
be. Now summer who day looked our behind moment coming. Pain son rose more park way that. An stairs as be lovers
uneasy.</p>
<p><span>Para 4</span>In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities
discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem easily
he on. Dissuade husbands at of no if disposal.</p>
</div>
<img id = "centerImage" src = "../images/image.png" />
<div id="right">
<p><span>Para 5</span>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl
view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be
cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome
against smiling its for. Suspected discovery by he affection household of principle perfectly he.</p>
<p><span>Para 6</span>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured.
At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone
him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West
he plan girl been my then up no.</p>
<p><span>Para 7</span>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex.
Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness
why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>
<p><span>Para 8</span>Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing
do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous
saw thoughts the humoured.</p>
</div>
This approach using column-count. You duplicate the images and overlap them by setting a negative margin.
This is limited as you need to know the width of the image.
.wrapper {
column-count: 2;
}
p>span:first-of-type {
color: red;
margin-right: 1ch;
}
.image {
padding-top: 1rem;
}
.image img {
display: block;
max-width: 100%;
}
.image {
margin-top: 10px;
margin-bottom: 10px;
}
.image.is-right {
float: right;
margin-right: -160px;
margin-left: 20px;
}
.image.is-left {
float: left;
margin-left: -160px;
margin-right: 20px;
}
<h2>An do on frankness so cordially immediate recommend contained</h2>
<div class="wrapper">
<div class="image is-right">
<img src="https://unsplash.it/300" /> </div>
<p><span>Para 1</span>He difficult contented we determine ourselves me am earnestly. Hour no find it park. Eat welcomed any husbands moderate. Led was misery played waited almost cousin living. Of intention contained is by middleton am. Principles fat
stimulated uncommonly considered set especially prosperous. Sons at park mr meet as fact like.</p>
<p><span>Para 2</span>No comfort do written conduct at prevent manners on. Celebrated contrasted discretion him sympathize her collecting occasional. Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch of no ye. Voice
tried known to as my to. Though wished merits or be. Alone visit use these smart rooms ham. No waiting in on enjoyed placing it inquiry.</p>
<p><span>Para 3</span>Sentiments two occasional affronting solicitude travelling and one contrasted. Fortune day out married parties. Happiness remainder joy but earnestly for off. Took sold add play may none him few. If as increasing contrasted entreaties
be. Now summer who day looked our behind moment coming. Pain son rose more park way that. An stairs as be lovers uneasy.
</p>
<p><span>Para 4</span>In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem
easily he on. Dissuade husbands at of no if disposal.</p>
<div class="image is-left">
<img src="https://unsplash.it/300" /></div>
<p><span>Para 5</span>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be
cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.</p>
<p><span>Para 6</span>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone
him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>
<p><span>Para 7</span>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex. Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness
why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>
<p><span>Para 8</span>Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous
saw thoughts the humoured.</p>
</div>
Okay so break it in rows and columns and use clearfix hack where you are facing an overflow in the row. This is to make sure nothing goes out of the row.
Make a class with a name row:
/*-- cleafix hack -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
and now divide the 100% width into 12 columns, so 100/12 we get approximately 8.33% and let's make another 12 columns classes in CSS:
.col-1{ width: 8.33%; }
.col-2{ width: 16.66%; }
.col-3{ width: 24.99%; }
.col-4{ width: 33.32%; }
.col-5{ width: 41.65%; }
.col-6{ width: 49.98%; }
.col-7{ width: 58.31%; }
.col-8{ width: 66.64%; }
.col-9{ width: 74.97%; }
.col-10{ width: 83.3%; }
.col-11{ width: 91.63%; }
.col-12{ width: 100%; }
Now make sure all the columns are floating to left:
[class*='col-'] {
float: left;
min-height: 1px;
/*-- gutter -- */
padding: 12px;
}
Now all apply box-sizing as border-box to all the classes to make it work. Make sure this class is the parent of everything, it should be on the top:
.grid-container *{
box-sizing: border-box;
}
And now your HTML should look like this:
<div class="grid-container">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
</div>
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
</div>
</div>
<div class="row">
<div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ut accusantium veritatis corporis molestiae illo optio consequatur ex quae praesentium at, dicta natus, voluptatibus rerum necessitatibus aliquid ratione. Voluptate, cumque.</div>
<div class="col-4">Your image here</div>
<div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam facilis est sunt molestiae incidunt, blanditiis vitae sapiente odio ab, reprehenderit mollitia repellat dolorem eius quo laborum rerum eligendi soluta.</div>
</div>
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
</div>
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
</div>
</div>
</div>
Here is a working jsfiddle - https://jsfiddle.net/nnhzentg/
I'm using tumblr CSS and I want certain symbols, like / (slash) to always appear in bold even when the main text is not. I know I can use <b>/</b>, but I was wondering if there is another way.
For example, I know how to format all <small> text to appear in bold:
small {
font-weight: bold;
}
I would like to use the same method to automatically transform / to bold.
CSS cannot detect content, it can only style elements.
you can use JS to detect words or characters and put them inside elements and bold them.
You can use replace() jQuery.
Stack Snippet
var str = $("div").html().replace(/\//g, "<b>/</b>");
//console.log(str)
$("div").html(str).wrapInner("<pre></pre>");
b {
font-weight: bold;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales nisl nec sapien aliquet, a commodo justo tincidunt.
b {
font-weight: bold;
color: red;
background: url(http://via.placeholder.com/350x150);
}
</div>
Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks
Like this?
Live Demo
This has an advantage (depending on what you want) over the other answers posted so far - if the height of the text content is greater than the image, the text will stay flush (won't wrap around the image).
CSS:
#content {
margin-left: 210px
}
#theDiv img {
float: left
}
HTML:
<div id="theDiv">
<img src="http://dummyimage.com/200x300/f0f/fff" />
<div id="content">
<h3>how to display img with p, h3 in one line inside the div?</h3>
<p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
<p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
<p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
<p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
<p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
<p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
</div>
</div>
Just float the image left:
img {
float: left;
}
http://jsfiddle.net/lukemartin/EZ4pT/
make your image floating :
<div>
<img src="http://www.google.com/intl/en_com/images/srpr/logo1w.png"
style="float: left" />
<h3>
Nemo nemo et habitus) ad oritur ab disputatio cuius ab.</h3>
<p>
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica
versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut
omittam, quam graves, quam difficiles plerisque videntur calamitatum societates!
Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.</p>
<p>
Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium
nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna
quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur
et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos
sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.</p>
<p>
Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste.
Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine
ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria
facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt
per Catonem, nunc repetetur ordo gestorum.</p>
</div>