I have a CSS code to make my first Paragraph letter bigger in (Fairy tales books style). The problem is that on firefox it works perfect (2nd, 3rd and 4th lines start from the right side of the first letter, then text is written normally) but for some reason Chrome puts this first letter outside the whole paragraph (not only 4 lines).
.first {
display: inline-block;
}
.first p:first-letter {
float: left;
font-size: 120px;
margin: 0 10px 0px 0;
}
p:first-line {
line-height: 100%;
}
<div class="first">
<p>TEXT</p>
</div>
You can use a smaller line-height to reduce the number of lines affected:
.first p:first-letter {
line-height: 75px;
}
.first {
display: inline-block;
}
.first p:first-letter {
float: left;
font-size: 120px;
margin: 0 10px 0px 0;
line-height: 75px;
}
<div class="first">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
Related
I want to stop the text from wrapping underneath an image, without making any changes to the HTML. Can this be done solely by CSS? I know the text can be wrapped in a div but I'm not able to do that on Wordpress.
JSFiddle: https://jsfiddle.net/s01x1ere/
HTML
<div>
<p>
<img src="https://www.easycalculation.com/area/images/big-square.gif">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
CSS
div {
width:500px;
}
img {
float:left;
height:100px;
width:100px;
}
You can try the above answer or you can just update your jsfiddle css with below css.
div {
width:500px;
position:relative;
padding-left:100px;
}
img {
height:100px;
width:100px;
position:absolute;
left:0;
}
If you know the height of the div, set margin-bottom of the image to the height minus the image's height.
For example, if the height of the div is 500px and the height of the image is 100px, then use margin-bottom: 400px.
img {
float: left;
height: 100px;
width: 100px;
margin-bottom: 400px;
}
Please attache this code
div { width:500px; }
img { float:left; height:100px; width:100px; margin-right: 15px;}
p { display: flex; }
<div>
<p>
<img src="https://www.easycalculation.com/area/images/big-square.gif">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
How can you specify the maximum number of columns when using display: grid;, with it automatically breaking when the content becomes too wide for the space (or smaller than a minimum size)? Is there a way to do this without media queries?
For example, I have the following which won't break into a single column mode when there is not enough room for the content.
#grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
}
<div id="grid">
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
Neither HTML or CSS have any concept of when descendants of a container wrap.
Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps.
Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use media queries.
Here's a more in-depth explanation: Make container shrink-to-fit child elements as they wrap
If you can define a column width, then grid layout's auto-fill function makes wrapping easy.
In this example, the number of columns is based entirely on the width of the screen:
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
}
<div id="grid">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
jsFiddle demo
Notes:
The auto-fill function allows the grid to line up as many grid tracks (columns or rows) as possible without overflowing the container. This can create similar behavior to flex layout's flex-wrap: wrap.
The minmax() function allows you to set a minimum and maximum size range for a grid track. In the code above, the width of column tracks will be a minimum of 100px and maximum of whatever free space is available.
The fr unit represents a fraction of the available space. It is similar to flex-grow in flex layout.
Suppose I have a text block inside a container, and the height of the container is set to auto. So, its height changes to dynamically fit however much text is present.
Suppose then that I have an image also in the container, floating beside the text and I would like it to scale to some percentage of the container's height.
<div class="container">
<img style="height: 50%; float: left;" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84"><br>
<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
If I set 'container' height to say, 500px, the image will scale to a height of 250px. If I set the height of 'container' to auto however, the image's height does not scale to 50% of its parent's height. It does not scale at all.
If possible, I would also like to set a min-height restriction on 'container' in the event of no text in the container, but this is not a high priority.
You can do this easily by flex css
Try following on parent div
display:flex
Flex-direction:row
Now create 2 divs within parent div and put image in one and text in another and add following to css of each div
flex:1
Now you divs are of equal width and aligned side by side. Now say you want to adjust your image you can do it easily by giving padding or margin top or using flex again on this div.
Hope it helps
Is there any option to prevent parent element be overflowed by children element when children element position is absolute and hight of children is higher than parent? I don't want to hide overflowing part by overflow: hidden, I want to force parent div.alert height to be not lower than its children. As you can see I am using position:absolute and transform:tranlateY(-50%) to put the content of div in the middle independently of the content length. Unfortunately when content is higher than minimum height of parent it goes outside of parent.
<div class="alert">
<span>
text text text text text text text text text text text text
</span>
</div>
<div class="alert">
<span>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
<div class="alert">
<span>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
CSS:
body{
background: #000;
}
.alert{
position: relative;
margin: 35px 5px;
background: #4679BD;
color: #fff;
padding: 10px 15px;
min-height: 40px;
}
span{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
JS FIDDLE
Thanks in advance.
Absolute positioning is used for exactly the opposite of what you're trying to achieve. You never clarified whether it has to be and why does it need to be absolute.
You can easily achieve the same effect using padding on the inside element:
body{
background: #000;
}
.alert{
position: relative;
margin: 35px 5px;
background: #4679BD;
color: #fff;
padding: 10px 15px;
min-height: 40px;
}
span{
padding: 12px 0;
display: inline-block;
}
<div class="alert">
<span>
text text text text text text text text text text text text
</span>
</div>
<div class="alert">
<span>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
<div class="alert">
<span>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
http://jsfiddle.net/rnq046wg/4/
Using the flex approach (be careful with older browsers):
body{
background: #000;
}
.alert{
position: relative;
margin: 35px 5px;
background: #4679BD;
color: #fff;
padding: 10px 15px;
min-height: 40px;
display: flex;
align-items: center;
}
span{
display: inline-block;
}
<div class="alert">
<span>
text text text text text text text text text text text text
</span>
</div>
<div class="alert">
<span>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
<div class="alert">
<span>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
There is no easy way to deal with this because position: absolute; is intended to "go out" from the parent's model.
What you can do to solve your problem is using another approach to vertically center:
.alert{
margin: 35px 5px;
background: #4679BD;
color: #fff;
padding: 10px 15px;
min-height: 40px;
display: table;
table-layout: fixed;
width: 100%;
box-sizing: border-box;
}
span{
display: table-cell;
vertical-align: middle;
}
Fiddle
If it a static text that not changed from time to time then give the min-height more space to contain the text.
Assign fix padding: 20px 0; it will always populate content in middle, instead of using absolute position and all other junk.
I have a web page with a header area in the middle. Elements are then part of the header. Can someone explain what overflow: hidden; does here. I don't understand why I need it or what it does.
#hdr_mdl {
margin: 0 auto;
overflow: hidden;
width: 980px;
z-index: 10;
height: 50px;
}
overflow:hidden prevents scrollbars from showing up, even when they're necessary.
Explanation of your CSS:
margin: 0 auto horizontally aligns the element at the center
overflow:hidden prevents scrollbars from appearing
width:980px sets the width of the element to be 980px.
z-index:10 causes the element to stay on top of elements without a defined z-index, *or- elements with a z-index below 10, or elements with a z-index of 10, but defined in before the current element
heigh:50px - a height of 50px.
When overflow: hidden is added to the container element, it hides its children that don’t fit in the container.
Example:
.overflowhidden {
background: green;
width: 10rem;
height: 10rem;
overflow: hidden;
}
<div class="overflowhidden">
This container has the style overflow:hidden. Text that does not fit becomes hidden. This is a very long sentence of text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text even more text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text this is the end of the sentence.
</div>
If the content in #hdrPmdl was to spill over 50px it will not allow the browser to insert scrollbars into the DIV. If the DIV doesnt contain dynamic content and the size will always remain static then it is probably not needed as the content will no be > 50px
overflow specifies what a browser should do, when content is bigger than block dimensions. overflow:hidden means 'hide it and preserve initial block dimensions'.
if you use overflow hidden for a particular content than the overflow is clipped for this content, and the rest of the content will be invisible. for clear the matter visit w3school
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Explanation of the overflow property: CSS overflow Property
Interactive example of the overflow property: Play it