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>
Related
can someone tell me how I can achieve this effect on an accordion?
At the moment I only have this result
Linear gradient mask-image transparency (several different ways to make it). Below is one of the ways.
A helpful source for this is:
mozilla
.mask {
color: #000;
font-size: 20px;
mask-image: linear-gradient(to left, rgba(0,0,0,1), transparent);
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
<div class="mask"><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 </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.
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.
possibly (hopefully) a simple question:
I'm using a png as a bullet in an unordered list using code found on here :
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
The only variation I've made to this is to set the vertical background position to 50% so that the bullet stays centred regardless of the size of text etc (and/or to avoid the need for different sized bullet pngs depending on text size).
The only problem with this is that if the text in the list moves onto a second line, the bullet centres with the two-line width of text (in other words the bullet sits somewhere near the space between the two lines).
Is it possible to keep the bullet centered with the font height, but of the first line only ?
Cheers in advance for any tips.
Maybe try setting a relative line-height to the element and use pseudo element to hold the bullet. This works with any text size:
ul {
line-height: 1.25;
font-size: 16px;
}
ul li {
list-style:none;
position: relative;
}
ul li:before {
position: absolute;
content: '';
width: 1em;
height: 1em;
margin-left: -1.5em;
margin-top: .2em;
line-height: inherit;
background:url(../images/bullet.png) 50% 50% no-repeat;
list-style:none;
padding-left:10px;
}
Demo Fiddle
Seems to work here:
HTML
<ul>
<li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
</ul>
CSS
ul {
list-style:none;
}
li {
background:url(http://drjohnart.com/wp-content/uploads/2011/11/bullet-point.gif) 0 0 no-repeat;
padding-left:20px;
margin:0;
}
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