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;
}
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 know that is a popular problem, but I really ca't find a solution..
here my jsfiddle
http://jsfiddle.net/vUqer/
As you can see, the
div id="layoutdueColonne"
go outside the
div id="content"
Why?
Thank you very much!
You don't need the height and min-height in content and layoutdueColonne. When you remove them and add
#content
{
background-color: white;
overflow: hidden;
}
You will see both sq1 and sq2 inside content.
JSFiddle
The float left and right for sq1 and sq2 causes this problem. As workaround, try to combine the two tables into one table or just accept the two tables to be vertically arranged.
Does adding
overflow:scroll;
to your content div solve the problem, or am I missing something else?
http://jsfiddle.net/vUqer/2/
Have tried a lot of different things, and still having a lot of trouble centring this navbar:
http://www.miriammedical.co.uk/miriam2012
If I follow the advice here...
Editing Nav Menu - How Do I Wrap display:block, float:left to have a Centered Menu?
... which is to add a fixed with and use margin 0 auto, all that happens is the list appears off-centre.
And then there's this, which suggests using margin-left: auto and margin-right: auto...
CSS Issue Centering NavBar
... but the same thing, it's off-centre
There are other tutorials suggesting using float: left, but any time I add floats (to either the list itself, or the list and its container), I either get the list appearing on the very left of the screen, or I just get everything split gaps appearing in the container instead of the list being on one line.
I know this is an oft-covered topic, but the same old advice isn't working for me. I'm obviously missing something, so help would be appreciated. Hopefully some illumination with clarify the core coding issues at play, as opposed to all the other answers on the net, which just seem to make the same basic suggestions. Thanks.
It's not an ultimate solution, but in that specific case it works
ul#nav {
font-size: 12px;
width: 666px;
margin: auto;
alignment-baseline: central;
}
Element which have any width , with margin:auto; will get centered position relatively to it's parent
You could use this:
div.navbar_wrapper { text-align: center; }
ul#nav { display: inline-block; width:auto; }
I'm trying to create a "grid" of "blocks" that when hovered over will reveal some text in a div beneath it. In the example I've got everything how I'd like it but- is there a way to make it work in the arrangement I have it in?
What I'd like is for only the bottom div to push down (like the bottom-left one in the example) when the one above it is "expanded". But obviously I'm not getting something right since it creates a giant gap and it's not showing the animation either.
The way the bottom div reacts in the second column is not what I'm going for, though.
Any ideas?
Thanks, appreciate it!
http://jsfiddle.net/nbFkZ/
Through your comments, i think i understood your question finally:
What I've done:
I've moved the second and third li into a new UL-elements.
And let both UL elements float to the left.
The HTML is a bit to much to post here, so i just post the CSS:
ul.things {
list-style: none;
float: left;
width: 240px;
}
ul.things li {
display: inline-block;
/*float:left;*/
margin:15px;
}
HTML, CSS & Live Demo: http://jsfiddle.net/nbFkZ/4/
Hope it helps :)
I have the following problem. Somehow, the margin-bottom of .item (should be 15px) doesn't work for the last item in .box. See the jsfiddle: http://jsfiddle.net/WVP3D/
It might be a basic question, but i've been looking for a solution and couldn't find it. If anyone has the time to help me out, your help is really appreciated.
It is working. There's a space between the grey item divs, that's the bottom margin.
You can add bottom padding to the box div if you want the lighter grey below the items. Even just 1px padding works (FIDDLE HERE) Because then, when padding is added to the box div which must occur after the clear div it forces the margin on the item div to be seen by the parent (box).
Try adding padding-bottom:15px; to .item
Add display: table; to your .box class
.box {
...
display: table;
...
}
Check this fiddle: http://jsfiddle.net/GnHuJ/1/
Floating the container element (.box) should give you what you want, as can be seen on this jsfiddle