I am looking for a purely CSS way to center an image within a paragraph of text so the text wraps on both sides of the image.
Ideely the image |-----| would be placed
before or after |-img-| the text within
the code structure|-----| and the text
would wrap around the image.
Found an answer that works quite well available at:
http://www.alistapart.com/articles/crosscolumn/
IE10 Platform Preview supposedly (according to this article) has a new feature called positioned floats that seem to accomplish what you're looking for.
For now, though, I think you're screwed :/
I don't think it's possible:
<p> Text that goes here and image <img src="img.jpg"/> continues text</p>
As far as I know browsers treat <p>content as belonging to a line, thus when the browser parses your p-tag which contains the image it will automatically make that line as high as the image.
Maybe it's possible with css3 though...
There is currently no way to do this. I have looked far and wide.
The other answers here don't address the question as it is asked. This link (A List Apart) requires the use of two paragraphs of text, and you can't do it dynamically because you have to be careful to match up the text on both sides of the image.
The other, IE10's positioned floats (Microsoft calls them exclusions), does sort of work, but with a list of caveats:
It's IE-only.
You have to specify things like the number of columns, rather than an offset.
It doesn't work well when the window is resized. Other content gets overlapped, and the container maintains a minimum size.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
Now I know there are similar questions posted, but I'm looking for a solution for pixel perfection.
Sandbox: http://jsfiddle.net/unqc4a0f/1/
Problem trying to solve:
Attempted code:
.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/}
.mt{float:left; width:400px;margin:0;}
In the past I've used the padding/margin hacks to push the image or the text objects down a few pixels to make them visually align at the top edge. And by visually I mean that I know that the fonts have a size and line height, but even taking that into account, the height of the actual font characters may include some space. This you can see in my example above. I've also —based on other threads here —tried using line-height, and although that did achieve pixel perfect alignment, it mangled the the vertical line spacing of the entire paragraph.
My question essentially is whether to continue using the padding/margin hacks or is there a more 'legit' solution. I ask this in regards to building layouts that are responsive and then having no issues with uniform layouts.
Thanks in advance.
Realize it's an old question but...
In CSS one can use a ::before element add a negative margin-top value to it.
Specifically, I wanted to share this Interactive Text-Crop tool I found that helps create a SASS mixin for this purpose.
The gist in this tool is that you remove the capital height from the (font-size * line-height) and then divide by two. But that is a simplification of how your font may or may not be structured.
In reality - There is no "pixel-perfect" answer because when it comes down to it, the physical structure of fonts doesn't always match their font-size and different font-families at the same font-sizes can still look taller or shorter.
Instead of float use a display:table; layout for a perfect inline placement and vertical alignment.
It only requires that you wrap them within an element...
Updated JSFiddle
.wrapper {
display: table;
}
.mi{width:200px;height:200px;display: table-cell;}
.mt{display: table-cell;vertical-align:middle;}
<div class="wrapper">
<img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi">
<p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p>
</div>
The space is supposed to be there it normally comes from line height which is something you need. If you font size is 14px and you reduce the linee-height to 11px you see the gap will vanish from the top, but the text will look very cramped..
Sometimes to get pixel perfect you have to just tweak like you have with the margin on the image..
I am currently learning Rails and CSS, and am trying to replicate the look of Bootstrap's github page as a learning exercise. Bootstrap's central unit (purpleish colored, and contains the big header "Bootstrap") fits across all of the top of the page, having no white space on the side. However, my current attempt looks more like this example page where the central grey unit containing "hello world" is itself a box, and with white space surrounding it. Basically, my question is, how would I make that whitespace disappear? I have attempted to emulate what is shown in the page's source, but am still getting this outcome.
Thanks!
If you look in the source to the example page you posted, you will notice that the hero element is in a div called container. This class has a left and right margins assigned as well as width. All you need to do is change those to 0 and 100% respectively and you should be well on your way.
Look for the jumbotron and masthead functions in the source for the example you provided
<div class="jumbotron masthead">
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
What's the best way to have the following?
Name: [Textbox]
Inside a div? I find that the Name: part doesn't center nicely with the textbox, especially with a small font. I want the Name: part to be centered vertically.
In some cases, the left hand part can be quite long and wrap onto multiple lines, like this:
All known
addresses: [Textbox]
Again, I would like the left hand part nicely centered.
I'm trying to stop using tables for layout, and move onto divs so I can do things properly, but I am having some issues. style="vertical-align:middle" doesn't seem to do anything.
There is no good way to do this. There's a decent writeup on some methods here, but most of them rely on hacking-around fixed-height elements, or using table/table-cell layouts on divs.
If having things centered is a hard requirement, I'd just give up and use tables
use tables or 2 divs: one for the label and another for your text box, so you'll be able to align them properly.
HTML5 is giving us some pretty cool features to aid in these type of instances. Elements such as <section> and <article> can be quite useful depending on your circumstance.
http://www.w3schools.com/html/html5_new_elements.asp