I'm trying to inherit the width of my H3 into my line break. How would I go about doing this?
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
<hr />
</div>
The easiest way would be to simply not use an <hr> tag, and instead opt for a simple underline with text-decoration: underline:
h3 {
text-decoration: underline;
}
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
Alternatively you could use border-bottom, which would allow you to increase the gap with padding-bottom:
h3 {
display: inline-block;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
Note that with the second solution, you'll want to give the <h3> tag display: inline-block so that it doesn't occupy the full line.
The solution to this is to set your <div> to have the property display: inline-block.
Adding the following CSS:
.title {
display: inline-block;
}
Related
Is there any way to achieve the layout shown in this mockup?
The supplementary text is right-aligned and if there is space it shares the same linebox as the final line of the main text.
Things I've tried
Floating the supplementary text.
Problems with this approach:
It's a float, so has all the edge cases and bugs floats have, and the next element has to deal with clearing it, and margins act in unexpected ways.
If the supplementary text is a different size, it's difficult to align it to the same baseline as the main text since vertical-align does not work on floating elements. It's possible to align them if all sizes are known, but in most cases this will require extra wrapper elements.
To share the same line as the main text, the supplementary text has to come first (this is unacceptable for me) or the main text has to be floating rather than the supplementary. And the latter case only works when the main text and supplementary text all fit on a single line, otherwise the supplementary will be below the final linebox of the main text.
Here it is with the supplementary text floated right, in both orders:
article {
clear: both;
}
header p {
float: right;
}
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
<p>Supplementary</p>
</header>
</article>
<article>
<header>
<p>Supplementary</p>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
</header>
</article>
Flexbox
This is better in one way: flex items can be aligned by baseline without extra wrappers and tricky styling. However:
If flex wrap is not enabled the supplemental text will only ever align to the first baseline of the main text, and the horizontal area available to all lines of the main text is reduced by however much space the supplemental text takes up.
If flex wrap is enabled and the main text wraps to a second line, or otherwise doesn't leave enough space for the supplemental text, the main text's flex element's width is the full width of the flexbox or close to it, and so the supplemental text will always be on a new flex line, even if there is visual space available for it in the main text's last linebox.
header {
display: flex;
align-items: baseline;
}
header p {
margin-left: auto;
}
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
<p>Supplementary</p>
</header>
<header style="flex-wrap: wrap">
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
<p>Supplementary</p>
</header>
Absolute positioning
This is no good since if absolutely positioned, the supplemental text doesn't reserve any space and it may overlap with the main text.
This is definitely an interesting issue. Unfortunately, it does actually seem like a prime usecase for inline and floated elements, as much of a pain as they are. Of course it's a bit more difficult to see how they'll interact in a "real world" environment, but if you were to use the ":after as a table" clearfix, make the h2 inline, float the p, and remove the line-height of it, it should rest at the bottom of the typographic x-height of the h2.
Here's a quick demo:
article:after {
content: "";
display: table;
clear: both;
}
header h2 {
display: inline;
}
header p {
float: right;
line-height: 0;
}
/* Just for example layout */
body{width:100vw;overflow-x:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center}div{max-width:50%}header p{position:relative}header p:after{content:"";position:absolute;width:calc(50vw - 40px);height:1px;background:red;top:6px;right:0}article{padding:20px;border:1px solid #ccc}
<div>
<article>
<header>
<h2>Lorem ipsum</h2>
<p>Supplementary</p>
</header>
</article>
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipi…</h2>
<p>Supplementary</p>
</header>
</article>
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing Lorem ipsum dolor sit amet, adipiscing Lorem ipsum dolor sit amet, adipiscing Lorem ipsum.</h2>
<p>Supplementary</p>
</header>
</article>
</div>
Interesting note, as #Temani Afif noted, you can replace the article:after { content: ""; display: table; clear: both; } with header { overflow: auto; } to make it self-clearing. A nice little trick to prevent littering your CSS with clear fixes
h2 {
display: contents;
}
p {
float: right;
transform: translateY(-50%);
}
article {
clear: both;
}
article:after {
content: "";
display:block;
width: 100%;
height: 1px;
background: red;
}
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing blah blahh blahhhh, and long looong looooooong text content</h2>
<p>Supplementary</p>
</header>
</article>
<br>
<article>
<header>
<p>Supplementary</p>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
</header>
</article>
and then without display: contents
and the extra gap that came can solve by setting line-height on the h2 (ex: line-height:1em;)
h2 {
display: inline;
/*line-height: 1em;*/
}
p {
float: right;
transform: translateY(-50%);
}
article {
clear: both;
}
article:after {
content: "";
display:block;
width: 100%;
height: 1px;
background: red;
}
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing blah blahh blahhhh, and long looong looooooong text content</h2>
<p>Supplementary</p>
</header>
</article>
<br>
<article>
<header>
<p>Supplementary</p>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
</header>
</article>
I'm trying make "the end" in the following code to appear inline with the lorem ipsum, and can't figure out how. Is it possible? I can't change the HTML structure at all. (nor can I add js, etc)
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I want it to look like this:
If you are able to make changes to the CSS, then this is an easy solution. Just use display: inline, which will make the element only take as much space as necessary (acting like a <span> element).
However, if by chance, you are unable to, then there is no way I can think of for you to achieve this given your situation.
#parent {
width: 300px;
border: 1px solid red;
}
#block1, #block2 {
display: inline;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
You need to set the two block containers to display: inline:
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
#block1, #block2 {
display: inline;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
So here is my Code :
.tagBoxContent p:first-child {
color: blue;
}
.tagBoxContent p:last-child {
color: red;
}
<div class="tagBoxContent">
<a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
<p>Lorem ipsum dolor sit amet,</p>
<p>Integer ma</p>
</div>
Why first-child dont trigger to the p tag but the last child element do? and how can i call the first p tag in this without first-child or with working first-child? I researched a lot but do not find any duplicate with the same problem.
You're using :first-child and it's not the first child. Instead, use :first-of-type.
.tagBoxContent p:first-of-type {
color: blue;
}
.tagBoxContent p:last-child {
color: red;
}
<div class="tagBoxContent">
<a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
<p>Lorem ipsum dolor sit amet,</p>
<p>Integer ma</p>
</div>
Use nth-child() to select a child not the first or last child
.tagBoxContent p:nth-child(2) {
color: blue;
}
.tagBoxContent p:last-child {
color: red;
}
<div class="tagBoxContent">
<a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
<p>Lorem ipsum dolor sit amet,</p>
<p>Integer ma</p>
</div>
I have element with Bootstrap collapse but sadly it is jumping up instead of just animating.
HTML:
<section class="row faq-item">
<h3 class="col-xs-11 col-md-10 faqalign" onclick="expand_faq(this);" data-toggle="collapse" data-target="#faq1" aria-expanded="false" aria-controls="faq1">
Czy wystawiają państwo fakturę z odroczonym terminem płatności?
</h3>
<div class="collapse" id="faq1">
<p class="col-xs-12">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
</section>
CSS
div.faq-list {
border-top: 1px solid #d6dae3;
overflow: hidden;
}
.faq-item {
border-bottom: 1px solid #d6dae3;
}
.faq-item p {
margin-top: 9px;
}
.faqalign {
vertical-align: middle;
float: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.faq .icon-plus, .faq .icon-minus {
font-size:20px;
}
.faq .icon-plus::before, .faq .icon-minus::before{
float: right;
}
.faq a {
text-decoration: underline;
}
.faq h3 {
font-size: 14px;
}
Second version
Also I have code without wrapper - this animates in both directions, but have ugly jump at the end of hidding :/
HTML
<section class="row faq-item">
<h3 class="col-xs-11 col-md-10 faqalign" onclick="expand_faq(this);" data-toggle="collapse" data-target="#faq3" aria-expanded="false" aria-controls="faq3">Jaki jest czas realizacji zamówienia?</h3>
<p class="col-xs-12 collapse" id="faq3">
Lorem ipsum lorem ipsum lorem upsumasdasdasd adas dasd asd ipsum.
</p>
</section>
CSS is the same.
Can someone help me figure out why it is not animating well?
This is because all the elements of your collapse content are all floated. This is happening due to the col-xs-12 class on your p element. You can either remove that or set its float to none. Additionally, margin does not work well with Bootstrap's collapse either. A fix is to change it to padding.
.faq-item p {
float: none;
padding-top: 9px;
}
Live example here: http://www.bootply.com/XwYztUl4u5
I am trying to place elements in my header. I would like to have 3 elements inline - button, image and simple text. The height of the header should be equal height of image. All elements should be centered vertically. Here's my HTML:
<div class="btn">
...
</div>
<img src="image.jpg">
<span style="float:none; display: inline-block; vertical-align: middle">lorem ipsum lorem ipsum</span>
On image "a" I present expected behavior. On image "b" and "c" my results were shown.
So, the expected result is to wrap text if it doesn't fit the page. But it still should be on the right side.
Legend:
red rectangle - button
orange rectangle - image
Does anyone know what styles I should use?
You should make them:
display: inline-block
Here is pretty simple demo:
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" />
<span>lorem ipsum<br/> lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30px;
background-color: red;
}
Demo
Another way.
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> <span>lorem ipsum<br/> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: table-cell;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30p;
background-color: red;
}
.row { display: table-row; }
Demo
Try giving your span a width. That would force the line breaks in your "a" example.
HTML
<div class="header">
<div class="btn">BUTTON</div>
<img src="http://lorempixel.com/200/200" /><span>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
CSS
.header {
width: 500px;
background: dimgrey;
}
.btn, img, span {
display:inline-block;
vertical-align: middle;
}
span {
width:200px;
text-align: center;
}
http://jsfiddle.net/abN39/1