This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I have a text over many lines. Example:
Can the text be adapted to the div?
In this example, after the word "text" there is a space with color blue. In CSS there is a method to avoid the blue space after the word "text"?
If I have several texts with different lengths, is there a way to generalize this behavior?
.box {
border: 1px solid red;
width: 200px;
position: relative;
padding-top: 40px;
}
.label {
position: absolute;
top: -10px;
background-color: blue;
}
<h1>My First Heading</h1>
<div class="box">
I'm a box.
<div class="label">
I'm a label without a text wrapped.
</div>
</div>
To avoid space after text and align it property to both side, use text-align css property.
.box {
border: 1px solid red;
width: 200px;
position: relative;
padding-top: 40px;
}
.label {
position: absolute;
top: -10px;
background-color: blue;
text-align: justify;
}
<h1>My First Heading</h1>
<div class="box">
I'm a box.
<div class="label">
I'm a label without a text wrapped.
</div>
</div>
you could use a margin-right: <unit of measument>; in order to remove the excess blue though this would not be very responsive if the size of that box is going to change.
Related
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I have run into this problem:
span {
width: fit-content;
background-color: yellow;
}
div {
width: fit-content;
border: black 1px solid;
max-width: 100px;
}
<div>
<span>Fooooo Barrrrrrrr</span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
I would like the div to be as close to the size of the span as possible. I have put width: fit-content; there but it seems to only fit to its own max-width. I am not asking to fit the div to the boundries of every line, but it should be as wide as the widest line in span. How can I resolve this?
Try with this:
.customblk span {
background-color: yellow;
}
.customblk div {
border: black 1px solid;
max-width: max-content;
}
<section class="customblk">
<div>
<span>Fooooo Barrrrrrrr </span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
</section>
Here you can use min-content, or if you don't want the words to break you can use max-content only on the div and let the span have auto width (it's the default, so no need to explicitly set it). Note that your CSS will influence all divs on your page, so to test this you need to set unique classes or ids to not have the first css influence the second css.
span.span1 {
width: fit-content;
background-color: yellow;
}
div.div1 {
width: min-content;
border: black 1px solid;
max-width: 100px;
}
span.span2 {
background-color: yellow;
}
div.div2 {
border: black 1px solid;
width: max-content;
}
<div class="div1">
<span class="span1">Fooooo Barrrrrrrr</span>
</div>
<br>
<div class="div2">
<span class="span2">Foooooo Barrrrrrrrrr</span>
</div>
This question already has answers here:
Is a see-through child div possible?
(5 answers)
How to show an animation that is hidden behind a colored div using a "reveal" div on the surface
(5 answers)
Closed 2 years ago.
I want to make a child element be able to see through its parent, so that the background image is visible inside the child but not the parent element, as in the picture below
Is that possible with CSS or with what else ?
As far as I know, you cant subtract one element from another to create this effect, you have to fake it. Consider the white strip as 3 elements sitting next to each other. The outer ones have a white fill, and the center is transparent. These 3 elements sit inside a wrapper that has a white border (to create the white edges). This effect is demonstrated in the example below.
img {
width: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
border: 5px solid white;
}
.row .col {
display: inline-block;
height: 100%;
background-color: white;
width: 100%;
}
.row .col.m {
background-color: transparent;
width: 500px;
}
.row .col span {
color: white;
text-align: center;
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfz6VkKDw0b3AacQg2PhSq8BpHf1z8Ngg-iYt_1Qqu5cR6Q3_Z&usqp=CAU">
<div class="center row">
<div class="l col"></div>
<div class="m col">
<span class="center"> Welcome back, <br> user1! </span>
</div>
<div class="r col"></div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I have this code:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
The div elements with text in them keep going to the bottom of the parent div. What is the reason for this?
Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
vertical-align:top;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
While I can't fully explain why the div elements with text drop to the bottom, I found that you can solve this by adding the property:
vertical-align: top;
to the .sibling class.
In order to understand why the divs go below, let's talk about the display property you have mentioned for the sibling.
.sibling {
display: inline-block;
}
From the name, we can understand that display:inline-block declaration shows properties of both block and inline level elements. In order words its an inline element who's width and height can be set or it's a block element which doesn't start off from a new line.
In your code, you have mentioned inline-block so they don't occupy a single block rather all div's are displayed on the same line somewhat similar to what happens when you apply float. Here, the div won't occupy the whole line so when we resize the browser, it tries to fits in all the div's which could be fit into that single line.
Hope this makes sense to you.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 5 years ago.
I used example from tutorial https://www.w3schools.com/howto/howto_css_image_text.asp
I don't understand why my text aligned to bottom right corner of outer div instead of image, can some one explain why? and how to resolve this issue without having fixed height container.
fiddle: https://jsfiddle.net/axhqn2b5/2/
HTML
<div class="container">
<img src="http://via.placeholder.com/200x50">
<div class="bottom-right">Bottom Right aligned to outer container, why?</div>
</div>
<br/>
<div class="container">
<div class="box">line<br/>line<br/>line<br/>line<br/>line</div>
<div class="bottom-right">Bottom Right aligned to inner box</div>
</div>
CSS
.container {
position: relative;
border: black 1px solid;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
background: lightgreen;
}
img {
width: 100%;
border: red 1px solid;
box-sizing: border-box;
}
.box {
border: red 1px solid;
}
It shows that image height is less then outer container height. I can use text "bottom" attribute to align it, but may be there is better solution.
You need to change the image diplay property.
Add:
img {
display: block;
}
The image by default is rendered as an inline element.
the difference you see i because of the whitespace below the image.
to fix that just add vertical-align:top; to the image
img {
width: 100%;
border: red 1px solid;
box-sizing: border-box;
vertical-align:top; /*add*/
}
and now your text will be at the same position.
both examples you gave are actually positioned at bottom right of .container
I'm trying to center a text element and then have an explanatory "what is this?" next to it. However when I type in the "what is this?" part, it obviously moves the original text element off center. Is there a way to fix this using CSS or HTML?
You can wrap the text-element that needs to be centered in a div and style position:absolute to that div using CSS.
Here is an example without having to assign width to any elements. This should work fine with any length of text thrown at it.
http://codepen.io/ay13/pen/GJKawz
HTML and CSS:
h1 {
text-align: center;
}
h1 a {
position: absolute;
margin-left: 10px;
}
<h1>
<span>Centered Text What is this?</span>
</h1>
Here's an example of how you can do it:
http://jsfiddle.net/wgbs4asv/1/
You basically need to have the right-side "what is this?" div inside of the main div (and before the main div's content), but with the right-side "what is this?" div's CSS set to:
float: right;
width: 100px;
margin-right: -100px;
position: relative;
(but using whatever width you want, and with a negative margin-right to match the width). The width would offset the main div's position, but then the negative margin with the position: relative brings it back.
It will be better if you share your code.
but anyway, you will need to position the text relative and then add the explanatory in it and position it to absolute, here is the code to make things clear.
.parent {
width: 80%;
background: lightblue;
display: flex;
justify-content: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
width: 80%;
height: 80px;
background: lightslategrey;
border: 1px solid red;
}
.text {
position: relative;
width: fit-content;
background: lightcoral;
text-align: center;
}
.explanatory {
width: max-content;
position: absolute;
z-index: 10;
color: white;
}
<div class="parent">
<span class="container">
<p class="text">text text text
<span class="explanatory">what is this?</span>
</p>
</span>
</div>