I am trying to get text wrap around the image in the page below. Although the image is floated to the left the text doesn't seem to wrap around.
http://goo.gl/SskvJ
I would appreciate any help
Your .region class has a float:left rule that should be removed. Then you'd also need to remove the clear:both rule on the h2 element. Then you'd want to add a float:left rule to the image on the page.
I think I found a solution. It worked fine with me.
What I've made was creating a div called content and I placed inside an img and also another div that contains text.
Have a look at here http://jsfiddle.net/Apfyv/
Hope it helps!
You have both image and text in a div and the are both floated left ... this is fine - but the div elements dont have a width specified - so they are taking up 100% (block element) - if you assign the divs a width it display to the right of the image
Seems like the text is not wrapping around the image because the text and the graphic are both in two separate DIV tags, you should merge them.
Add a style
.region > img {
float: left;
}
And add display: inline-block to #page_product #overview h2
#page_product #overview h2 {
margin: 0 0 1.5em;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
line-height: 1.429;
display: inline-block;
}
Related
I just installed a new template on my blog and I cannot for the life of me figure out how to wrap a blockquote around a photo. This is the current blockquote CSS:
.post blockquote {
font-style:italic;
background-color:#ECF1F2;
padding: 20px 20px 20px 20px;
border:1px dotted #31484C;
line-height: 1.8em !important;}
This page shows an example of what I'm attempting to fix and this page shows what I want it to do.
What do I need to add to make this work?
Put the img tag inside the block with your text and apply float: left to the img. That's what floats were made for initially.
I've isolated the relevant CSS and made a simplified example that will hopefully make it clearer for you (I've created utility classes to text alignment, as the initial code as inline style in the HTML, which is not best practice.
Key CSS:
Everything is wrapped in a container div. Then the following
float: left;
clear: left;
margin-bottom: 1em;
margin-right: 1em;
is applied to the book's thumbnail. Since it is only clearing the left side, content on the right side can flow around it.
By applying margin and padding to blockquote, the illusion of the book popping out of the blockquote is created; however, all that is really happening is that the image clears the left side, for the size of the image. After that, content from the right side is allowed to fill the parent container in full, as is the default nature of block-level elements.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
When I change my website to
<!DOCTYPE HTML>
Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...
Has anyone encountered this anomaly before and fixed it?
EDIT
Here is the JS FIDDLE
http://jsfiddle.net/fRpK6/
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
I often solve this by giving the image element display:block or display:inline-block as appropriate.
it is solved my problem.
line-height: 0;
I believe setting
line-height: 1;
on the image will also fix this problem, especially if it's in a block by itself.
apply display: block to the image fix it, i have this issue with images inside floated divs.
For me it was a combination of
font-size: 0px;
line-height: 0;
on the wrapping container that fixed it.
I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;
.placeholder {
font-size: 0px;
}
maybe it is the problem of the white-space that causes this.
so, the methods bellow maybe useful
img {
display: block;
}
or
img {
vertical-align: top/middle/...;
}
or
.placeholder {
font-size: 0;
}
In my special case none of the above solutions worked.
I had a wrapping div with display: flex;.
I managed to make this working by adding: align-items: flex-start; to the wrapping div AND to all the images: display: block;.
Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.
not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;
http://jsfiddle.net/fRpK6/3/
It also happens with piled up divs, just add float property.
Example:
<body>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
</body>
Problematic CSS:
.piledUpDiv{
width:100%;
display:inline-block;
}
Solution:
.piledUpDiv{
width:100%;
display:inline-block;
float:left;
}
I have a div with some fancy non-repeating background (figure 1) and I want to place a text (in fact, 1 or 2 characters) inside it. The background is asymmetrical, so I want to center the text relative to a portion of the image (figure 2). Ideally I want it to look like in figure 3.
I managed to get vertical positioning done by
div.button {
font-size: 40px;
line-height: 72px;
padding-top: 0;
}
However, I can't get it centered horizontally the way I want: text-align: center makes it look like in figure 4 (i.e. centered relative to entire div width) and padding values have no effect.
I know I can nest another div inside, size it appropriately and place my text inside. But is there a way to get this done without nesting any additional elements? The matter is that I have hundreds of those generated on my page and all of them have event handlers, so I'd rather tolerate ugly text centering than have to deal with additional nested elements.
JSFiddle: https://jsfiddle.net/qnxs2ky5/
For some weird reason you can add text-indent to move the letter to the left;
div.tile {
width: 88px;
height: 123px;
text-align: center;
font-size: 72px;
line-height: 104px;
color: #FF0000;
text-indent:-10px;
background-image: url('data:image/gif;base64,R0lGODlhWAB7AIAAAAAAAP///ywAAAAAWAB7AAAC/4xvoMvtD6N8qNqbpt68438w4Pgp5FmJaAasbmC+6LLS8tzep03GYQcMTlK5kS+hKxWTKWJvuWQijtLQlOq0Vi3YbZF38UW3GXLzN/5pzWr2GpyFudvzbysN+87Le7s8rNeHV+X3FzcolKjogMQVGKfT5UU3JgaZJElI6bhmSDgoVdi4OeoFyiTqmffGlhlKV2qperVYu3illeYKsosJe7dZeWo0HAk7ahlVTLxniBWTPGXanMoXXYq6LFMtd6f3GKr9wg18Lc7cd9y9ipRzzvs+o17+jZ1NPc9i5W7Wa8wnLU+9WZji7cgncJ+9gvgA5jLXz2APhDyAEYwk0QhFiP9k/N0gp6/dQowN2QWs+CfjpX4bB6rElc5hI5T8Or7EADKhyIsfb4ZpqZDnNp9cgO4k6nGb0XVCxxE9Y/Khy4gln4VkivRpwKgzOU6LyTWl109VK121mLVsUZ1YqYK1KtCW3LkqTtK9O3ctzZE91Z7Z29RF0nFL0bqtUzjlYTc5Aad9a5atYZt+7U6lDFnv2HCVpQZ9jFim2MtfQ4d1t/le5r+pGa62/Hlxq8Q1SzOmzXdo566kyb72fFQ2S9Goe3P+zTs2ZtNwHQvviDtwDa1vIjtffpv4WcXYZ2uXzN2299Pba/tmbr01SeSjlYsfTh68+ePoNRtXXZ/1fdf5YQfd7w5fc+r1xV5x7p2XXXzXvQfddwsiOJ6A+63XH3BtAdigggPqVmB5uTm1W3v/MTiJgxuC2KF8HwpGHTLpTUhgghpCMR9+4yloEjTPvaKOYkfUyB98YfmIV5FD9EhkZM0whkdNdUm35HSIzBSXRVFmA8dfUhnJZS+1KdPlXTXEAtWVV5qnjJlqzgeFmmayuZWbDSnZopy5rAWlnR8tBKSemvC5op9KjZSloKjEWaahf/JVqKKEIdrEYI4ecwo3kwKiy0RohCkXLwddyuOnoP4jz6iDsmgqDgVxWqQFBQAAOw==');
}
<body>
<div class="tile">i</div>
</body>
For your example -10px look perfect, but I suppose that you could use em as well to be more flexible.
I was creating a unordered list and in that list I wanted to add a color pallete type window and I tried to create one the following way
<ul><li><div style="width:10px; height:10px; background-color:#0066cc; float:left;"></div>test</li></ul>
http://jsfiddle.net/wNkmJ/
I am attaching a fiddle link to see the output.. Is there a good way to align the div to text or should I just adjust the margin of div element, but I dont think that is the best possible solution..
On your div, set:
text-align: center;
display: inline-block;
float: none;
This positions the div in much the same way that images are positioned.
In general, having line-height for li will be a good choice.
From your JSfiddle,
li{
line-height: 10px;
}
check out this JSFiddle.
How would I go about vertically centering the name "Tony Robbins" for this drop down menu? I've tried adding vertical-align:middle to both the span containing the text and to the li#drop-avatar which contains the text. Can someone let me know what I'm doing wrong?
P.S. is there also a way to get text-align: center also working so "Tony Robbins" is also centered horizontally?
http://jsfiddle.net/vJaaR/
add:
img
{
vertical-align: middle;
}
Because your text is inline with the image, you need to tell the image how to align with the text.
span is an inline element, so it will only take up the amount of space that it needs. Consider making this span a block element using display: block and it will take up the full width. Then you can apply text-align: center to it.
You may have to float the image to the left in this case, though.
Update: I added the styles to the fiddle:
http://jsfiddle.net/Dismissile/vJaaR/1/
Does this do what you want?
These are the styles I added:
a.small-width > span {
display: block;
text-align: center;
}
a.small-width > img {
float: left;
}
You might want to create new classes because I have no idea what else you use small-width for.