Stupid question maybe, but I cannot seem to get the text to wrap around my images. In the editor it looks fine, everything is wrapped around it, but when I save it, there is no wrapping.
example: http://www.beatinganger.com/three-reasons-for-angry-children
remove the float: left; from #left_container p
there's no need to float all the paragraphs you already have the image floating inside the content so it's the only one that needs to float for the p or any other element to wrap around it
It sounds like you may need to add styles to the images, either float left or float right - can't say for sure as the link is broken.
Edit: It is because you have width:100% and float:left set on #left_container p, and the images you are adding are wrapped in p tags. Remove width:100% and float:left and you should be back in business.
as clairesuzy says aswell...
Put a float on the <img> tag. But I suggest to avoid writing css in the tag though, it's not good practice unless you really have to. Do it externally. You can target the image by doing, p img{ float: left; } (basic code), depending on the class or id you've giving the tags.
Related
I've researched similar questions and tried using display:table-cell; inline-block; vertical-align:middle all over the place, but I can't get this to work. In this sample Genesis theme page (please look), it demos the use of columns using 'one-half' and 'first' CSS classes. Using DevTools/Inspector you can go in and add <img src="http://placehold.it/140x240"> before the paragraph like I've shown below. Maybe there's something in the Genesis columns that's making this harder than it should be, or more likely I'm missing the obvious.
In that first column I need the img to appear to the left of the text, while the text is vertically aligned. I can't seem to find out the combination that will do it. NB I do know the height of the image - it's not dynamic. I could use spans if easier in stead of P.
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>
The key here is declaration of the widths. p by default will have 100% width even if you set the display to inline-block, so you need to set it up with something like this:
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
</p>
</div>
Note the classes added to the children, with the CSS now applied:
.OneHalfItem {
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
}
.OneHalfText {
width:calc(100% - 140px);
padding:10px;
}
Now it lines up nice and dandy, with the use of calc. Couple of things:
This works easily because the picture is a fixed width; if the imgsize is variable, you need to declare it's width as well (a percentage or something), then calculate the p size based on that
I eliminated the white space between the end of the img tag and the beginning of the p tag, because by default inline-block will add in a 4px margin to the right of each element. By removing the white space between the tags, it eliminates that empty margin.
Note that this will only work for IE9+ (and real browsers, of course), so if you need to support IE8- then you'll need to do the same kind of width calculation via JS, but easily done.
Here is a jsFiddle to show it working.
Is there a way to display a row of links horizontally without using float:left? It's way too hard to center a div when using float:left, I can never get it to work.
Use display:inline;
http://jsfiddle.net/tcQzL/3/
If your elements are inline elements they will display in one row, otherwise you must make them inline.
I'm not sure if I understood correctly, but just make new div-where your buttons are in. And in that new div make your links have float:left
Then just normally position that new divyou made.
But I think that those those earlier answers from Andrei S and mesiesta are more better.
you could try display: inline or inline depending on your needs (from what I know, inline-block offers more flexibility than just inline)
here, check this fiddle
There's a catch though if you use these, if you look in the fiddle, my first two elements are written one after another so that I don't have any gaps between them (that's why I added the borders) and the other ones are written one below each other and as you can see, there's the gap I was talking about. So keep that in mind while writing your code.
There are different workarounds about this, but if you do need borders, and not just the text, you should really consider using float to avoid any workarounds
You can use display:inline-block for that. Write like that
.link{
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/tcQzL/10/
My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)
This can screw up layouts where child elements are sized to exactly fit their parents.
I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?
That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.
If you want to use inline-block you need to remove the white space between the elements as you are doing it.
Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.
A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.
From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.
You should try font-size:0px; line-height:0px for outer div.
Something like this:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
This is because you use display: inline-block; for the div elements.
Block elements strip white space around them, inline elements don't.
Try float: left; instead.
What would be the proper way to do this? I have an <h1> tag, and I want to display a <a> that is inline with it.
display: inline
should do the trick. It will make the <h1> behave like any inline element.
By default the h1 tag has a display:block; Thus changing it to display:inline you will lose the normal feel of an h1. But your link will directly follow it.
Also why not just place the link within the h1 tag? ie:
<h1>Hello World</h1>
Or you could float it to the left (or right):
float: left;
However, this can cause other problems sometimes.
Also, margin-top: - height-of-h1 on a could do the trick - you have like 1000 options (almost literally), we can't tell you more until we see some sample code.
Or you could use a tag:
<h1>Important title <span style="float:right">Link</span></h1>
In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?
Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.
to clarify:
I need them "display: inline" because I may need to center them within the UL
I need only some of the elements to have a line break.
Why do you use display:inline?
display: list-item; does exactly what you need (which is default for li)
You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.
Alternatively, float:right and clear:right will do a similar thing.
Do you want a "line break" after each <li> or just after a few certain ones?
For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.
For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.
Try putting display:block; on the particular <li> that you want on the next line.
You could try and use the :after pseudo-element but I haven't played with it much.
li.class:after { content: "\a"; white-space: pre; }
works for me.