I try to have to div floating side by side.
I have found a solution that work only with text :
http://jsfiddle.net/Sy392/2/
For that, i'm using table-cell :
.dablock {
display:table-cell;
}
But if there is an image that replace the text, the "floating" effect doens't work.
http://jsfiddle.net/Sy392/1/
Thanks you for your help :)
Add
vertical-align: top;
to .dablock
Try
vertical-align: top;
On the img tag. By default, images flow the text directly at the bottom of the picture.
http://jsfiddle.net/Sy392/5/
Related
I need to keep a group of images from wrapping.
I was hoping the css below would do it, but it's still not working.
img {
display: inline;
vertical-align: top;
float: none;
}
Here's the demo: http://plnkr.co/edit/BwM8SuOpV49MuxXSnfP6?p=preview
Is there a way to do this?
Thanks!
-- EDIT --
Here's a better example: http://plnkr.co/edit/WwIh6EoHcpHO18Ln06Td?p=preview
This shows a sentence (with each character rendered as an image) being wrapped at the wrong spot. Is it possible to set a css nowrap value per image?
...ok, figured it out: the solution is to wrap each word in an inline-block span
CSS clear property
http://www.w3schools.com/cssref/pr_class_clear.asp
clear: none|left|right|both|initial|inherit;
I have built a content div with three further divs who have the
display:inline-block;
attribute. One of them contains another div element which has some audio controlls. The right div has a really big margin! Chrome and Firefox don't show any margins or paddings. If I delete the #music element, everything is okay.
Here is a live demo
Thanks for helping
Because you are using the display: inline-block; definition, your content is verticaly aligned to baseline by default.
Apply this on your .frames class:
vertical-align: top;
Problem solved. ;)
if you add float:left to #music it gets fixed _
as suggested using clearfix on parent element doesn't hurt:
.parent:after{
display:table;
content: "",
clear:both
}
You can see here in this fiddle that the text isn't sitting vertically center after I apply the :before pseudo:
FIDDLE
.explore:before {
content: url('../images/explore.png');
margin-right:5px;
}
I've tried to adjust the line height but it doesn't affect the text in any way.
Any ideas as to why it knocks down my text and how I can fix this problem?
Add vertical-align: top;
http://jsfiddle.net/bfkv8zsq/3/ Here you go!
It's amazing how can't I just pull out such a simple task.
We wish to have a menu (ul list) displayed inline, where, on top we have an image and, at the bottom, we have an anchor.
Something like the above:
<iimg> <iimg> <iimg>
<anchor> <anchor> <anchor>
The solution must be valid for IE 7 too.
I've tried text-align centered the image. No luck;
I've tried display:block; on the li, on -img on both...
I've also defined widths here and there (but the images could have variable widths (not sure));
I've tried margin: 0 auto; but it centers on the page, but not on the LI. :///
Can I have a help here plz ?
http://jsfiddle.net/4E7Lu/
ul li {
display: block;
float: left;
text-align: center;
}
Just be sure to do a clearfix after the ul. As in:
<div style="clear: both;"></div>
If you make the ul display as inline-block, and set the anchor and image to display as block, you can center them via margin: 0 auto;.
http://jsfiddle.net/4E7Lu/1/
I would apply the image as a background image to each li element. It's easy to position using background-position and keeps your HTML markup clean for SEO. You can then use CSS sprites to make loading the images faster.
Just saw this, could help.
http://css.maxdesign.com.au/listamatic/horizontal01.htm
I'm having a problem with divs not expanding vertically where there are anchors with padding inside.
Since the explanation is not the best one, I've recreated problem here: http://jsfiddle.net/uF6KN/3/
Basically, I want blue anchors to have to same top coordinate as a blue button. I've tried somethings but got stuck. Any help would be appreciated.
I not really that proficient in CSS so I might be missing a simple thing.
Thanks!
#d_float_right a {display:inline-block;}
a {
float: right;
}
should fix it. changing the a from a inline to a block element. Setting display:block on a would also make it a block element but would put each on a newline
#d_float_right a {
display: block;
float: left;
}