On a project I'm working on, there are a few places where there are two columns of text. As this is content manageable, I don't really want to make two separate text areas for the user to fill out, but rather one which I split into two columns with column-count: 2 in CSS. The content will be inside a single p element.
The issue is that I need to style the second column slightly differently. I need to change text-align to right, whilst keeping the first column text-align left.
I know I could do this in PHP and/or JavaScript, but I'd prefer to do this using CSS alone if possible.
Markup:
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nostrum delectus iste sit officia! Molestiae ducimus, sunt omnis earum, vitae vel dolore blanditiis placeat, porro aliquid, non repudiandae recusandae quisquam sit enim. Aliquid placeat, obcaecati autem aut. Eum eaque nemo, voluptas repellat ab recusandae, culpa eos quam voluptates, molestias expedita ipsum debitis dolorem atque explicabo labore consequuntur cumque adipisci quos eveniet error. Sint, provident cum. Totam, nisi, quo. Hic, fugit, iusto. Veniam est nulla, debitis commodi provident fugiat quam earum incidunt, cum vel minima ipsum magnam cupiditate tenetur autem obcaecati aliquam soluta, repellat in quibusdam illo! Dicta numquam, saepe corrupti.</p>
</div> <!-- /.content -->
CSS:
.content p {
column-count: 2;
}
As of now, there is no way to target columns in pure CSS. The closest you could get is using JavaScript to split it with new elements, or amend your markup.
This has been asked similarly before: https://stackoverflow.com/a/21238260/271271
Can you try using this:
table.secondcolumn td:nth-child(2) { text-align: left; }
or alternatively try this SO link
EDIT/Update: Apparently, there are no direct ways (via CSS) to style a specific text column via CSS.
Related
I wanted to use a short description in my template. is added. It looks like this:
<div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit eligendi at accusantium vero culpa facilis ipsam enim distinctio iste sed non, quo, provident recusandae architecto voluptas consectetur dicta, voluptatum est. Totam numquam possimus porro eius? Numquam ullam
</div>
</div>
I want to be able to change div to span or p, add classes, etc. Where to find it?
As you can see the code below, div is the outermost scrolling container and the core in this topic section is a containing block with spans set as white-space: pre;.
One section is extremely simple and is just a block. The other .floated is set float: left;.
But the computed width of them is different: the former is just as wide as its containing block div i.e. 100px in this case, in contrast to the latter is as wide as its contents, around 1287.47px(given by Firefox). To make this difference more observable, I set a background color for both of them.
So the question comes:
My understanding is that the width of a block with width: auto; depends on its contents. Why is the first section not?
The expected effect is achieved by using float: left;, as .floated shows, but why and how does it work? What exactly does the float do? A new BFC? But if I change float to display: flow-root; which also creates a new BFC, it still doesn't work.
Thanks in advance for your help!
div {
border: 1px solid red;
width: 100px;
overflow: auto;
}
section {
background-color: teal;
}
span {
white-space: pre;
}
.floated {
float: left;
}
<div>
<section>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
<div>
<section class="floated">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
Online Demo
My understanding is that the width of a block with width: auto; depends on its contents.
It doesn't. The width of a block level element should respect this formula:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
As you can see, the content play no role in defining the width of your element and it will end with a width equal to its containing block (parent element). That's why you have the logical result of 100px. After defining the width, the content should try to fit that width but you have disabled line breaks with white-space: pre so all you will get is an overflow.
When, you make the div floated you need to consider another part of the Specification that describe the width of floating elements and you can read:
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
The content is considered in the "shrink-to-fit" algorithm.
In your case, since you are using white-space: pre you are not allowing any line break so the "preferred minimum width" will be the winner and you will end have a width equal to the longest sentence
If you disable the white-space, you will force line breaks and your content will try to fit the "available space" and both cases will give the same result even if we have different algorithm involved
div {
border: 1px solid red;
width: 100px;
overflow: auto;
}
section {
background-color: teal;
}
.floated {
float: left;
}
<div>
<section>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
<div>
<section class="floated">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
<span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
<span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
<span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
<span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
</section>
</div>
This question already has an answer here:
How to get text to flow around irregular shape in CSS
(1 answer)
Closed 2 years ago.
I'm trying to recreate the above photo using CSS, but I haven't been able to think of a solution yet. I need to indent every new line of text slightly more/less to create the angle effect.
I thought initially of clip-path, but that just cuts the text. Text-indent only effects the first line. I could use the span tag on each new line... but with this being responsive the new line will change as the window collapses, so that won't work.
The only plausible solution I have thought of has been to create this effect in illustrator and export as an SVG. This has the downside of being treated like an image as far as sizing goes...but it gets the effect across. Responsive would be a challenge as well.
Any super CSS tricks anyone know of for this effect? Much appreciated.
Use shape-outside...
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
MDN
.main {}
.left {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
<div class="main">
<div class="left"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta nesciunt esse odit impedit expedita magni accusantium facere perferendis quasi architecto quo alias libero, iure, et repellendus, laborum quaerat nisi ipsam dolores. Cumque tenetur vitae
totam, adipisci assumenda rerum saepe deserunt aliquam quidem sunt. Assumenda consequuntur unde tenetur aut blanditiis quidem minima dolorem eos repellendus ipsa quam fuga eius quia, a veniam totam itaque eaque. Aliquid incidunt vero beatae voluptates
modi saepe id et, praesentium velit eos numquam architecto, deserunt nulla consectetur cupiditate repellat quisquam iste veritatis sunt temporibus commodi rem? Ex fugiat beatae hic vero vel in eius saepe nihil?</p>
</div>
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 3 years ago.
I'm messing around with trying to target the first <p> tag in a div that has a data attribute of data-item="8"
So far, I've tried this:
[data-item="8"] p:first-child {
font-size: 1.8rem;
}
as well as this:
p:first-child [data-item="8"]{
font-size: 1.8rem;
}
and it's not picking up on the style change. Not sure if I am going about this all wrong or if I am missing something where that's not going to work.
HTML:
<div data-item="8">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ut aliquid perspiciatis a aliquam repellat non ipsum necessitatibus distinctio quos molestias asperiores quis eaque, laudantium ipsam nulla adipisci quo nemo!</p>
<p>Quam soluta quis doloribus, ut cum iste cumque earum aliquam ratione! Fugiat nemo animi ut corrupti tempora, omnis nulla. Culpa a quibusdam sequi quia totam dolores magni ducimus nesciunt expedita.</p>
</div>
Here you go man. Just the wrong css selector.
https://codepen.io/jackgisel/pen/dyPxrOG
[data-item="8"] p:first-of-type {
...
}
im new in this community, and a very newbie coder.
I want to set a space between this two columns, I tried a few codes but didn't work...
This is what I did:
<div class="container">
<div class="main row">
<div class="col-md-3">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
</p>
</div>
</div>
<div class="col-md-9">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
</div>
</div>
And i got this:
http://i.imgur.com/0dhqCZO.png
How I can set a space of X pixels between? :S
And another question to not make another post:
How I can set the 2 columns the same height? ( I know its a awesome newbie question haha )
First of all, actually there is a space between this two columns (30px due to Bootstrap padding included in col- classes. You don't see this 30px gap because you set background to col- classes. In order to see it you have to have another div inside col- class.
CODEPEN EXAMPLE
Secondly, read about grid system in Bootstrap, you can't have col-md-12 directly after col-md-3 (you have to use another row if you want to nest columns in another column).
You can change the gap by changing col- classes padding. Default for Bootstrap is 15px on each side. For example:
.col-md-3,
.col-md-9 {
padding-left: 60px;
padding-right: 60px;
}
CODEPEN EXAMPLE
Columns of the same height, the easiest example is this:
.column-1,
.column-2 {
height: 300px;
}
CODEPEN EXAMPLE
Use CSS's margin.
<div class="container">
<div class="main row">
<div class="col-md-3" style="margin: 10px">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
</p>
</div>
</div>
<div class="col-md-9" style="margin: 10px">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
</div>
</div>
Of course, change 10px to however many pixels you want.
Since we are using margin which affects all borders, 10px is half the amount of space that will be between the columns.
You can use margin-right: 10px on the first instead, if you want exactly 10px space between the columns, and no extra margin around them.
margin: Defines the margin around all borders of the object
margin-top: Defines the margin at the top border
margin-bottom: Defines the margin at the bottomborder
margin-right: Defines the margin at the right border
margin-left: Defines the margin at the left border
You should use bootstrap gutter for the separate columns. You will find good example and some information about it here
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/
And you can use .row-eq-height to get the col-height equal.
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="row row-eq-height"></div>
Full information is available here.
http://getbootstrap.com.vn/examples/equal-height-columns/#
If width of content boxes is not a problem you can use col-md-offset-* where * can be 1,2,..,12 as per your choice.
<div class="col-md-offset-1 col-md-8">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
For setting two columns to the same height you can set min-height css to some predefined length.