snippet of exact problem Problem -
[screenshot of website][1]I am creating my personal website. I need my skills text shown next to one of the images using the Float left. it doesn't work as expected.
used float left to align text next to the image-
below is the link to code-
codepen.io/gk65408/post/why-does-css-float-doesnt-move-my-text-to-right-side-of-my-image
It's not working because there are no spaces in the text of that paragraph, so the line-box is staying as long as possible, which pushes it below the image.
Either add normal spaces or add zero-width space characters.
Related
For the needs of an internship project in WordPress, I decided to slightly superimpose a white block containing text, on the left of a photo.
These two elements are in a container.
This is my-figma-example.
I already tried to play with the z-index and the position, only it works on the text contained in the block and not on the block itself...
I also failed to paste the image on the right edge of the screen without the white block being stuck to the left edge.
Do you know how I can do this?
I have done the same with negative padding and z-index, remember to apply a lower z-index to the second column and not to the general horizontal block.
When I float images on my WordPress site, the text is not aligned vertically with the image, but appears a bit lower on the page. I suspect this is to do with line-height of the text, but I'm not sure how to fix it.
Here's the example. Scroll to the bottom of the page under Recommended by:
http://www.myfiveacres.com/hidden-gems/saison-market-vineyard-duncan-bc-canada/
You should post your code, but one thing you could try is adding a negative top margin to your text.
margin-top:-*px;
And of course, replace the * with however many pixels are needed.
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
Is it possible to style text wrapping ALL AROUND an element as it appears in the image attached? (Either CSS, or JQuery)
.
Thank you
As far as I'm aware, there's only an ugly hack where you cut your image into "slices" and have them sitting inside your paragraph text at the right spots. Needless to say, that's not very nice nor very dynamic.
Floating only allows you to move elements to the left or right.
I'm wondering if this is possible:
A container has a line of text in it, it can wrap to a new line if it's too long
The line of text has padding around it and also has a background color
The padding is consistent until the text wraps, the first line will not have padding on the right side of the first line
How can you keep the padding on the right side of the first line? Please note I do not want a large block of black that runs straight down from the widest line.
Here is a jsfiddle in case you need to see an example: http://jsfiddle.net/x6Rxw/
Thanks!
Sorry for bringing this topic back up- however this post may be helpful to future people looking.
This is a jQuery + CSS fix for this issue in a plugin form.
http://jsfiddle.net/OwenMelbz/rd8Qc/