I am making a table-type layout with divs and spans. I am getting some weird behavior when any of the spans are empty - a margin appears at the top of the parent.
I think it might be linked to using display: inline-block but I'm not sure why it is doing this.
Here is what I am talking about
Is there any way to fix this strange layout behavior?
Add vertical-align:top to .ListView_ColParent
.ListView_ColParent {
display:inline-block;
vertical-align:top;
}
jsFiddle example
Related
I am trying to do 3 columns responsive layout. It should work for IE8 also. So I am using float: left for elements in row, but I faced with some troubles:
The last images in row has unexpected height. I understand that it occurs because .news_preview { width: 100%; }, but I do not understand how to fix it.
.news__item elements should have the same height = 100%. I know how to fix it using JavaScript, but is it possible to fix it using css only for my .news__item elements with float: left;?
The example: https://jsfiddle.net/3nxetb45/1/
Well, there are few points which you should be aware. I have removed height:100% from .main and used clear:both after div.
About using clear:both, use them just after floated element so by this there will be no extra height or space issue.
About second issue, i have used display:table to main element and display:table-cell to child and removed float:left to get the desired output. Also we have replaced bottom-border to get result. For more detail check fiddle..
Check here
I have created some "buttons" out of three divs and I have set a hover to each div so that the text drops by 5px when the user hovers over the div.
I'm using display:inline-block as I don't want to use float:left
The only problem is that when I use display:inline-block on the divs, it lowers the other divs instead.
Here is how it should work (using float:left)
WORKING
And this is what happens when I used display:inline-block
NOT WORKING
Is there a fix for this or am I going to have to use a different solution?
Sorted the problem!
Although KingKing's answer was correct, using .wkd > * {vertical-align:middle;} didn't seem to work well with the rest of my code so I had to alter it slightly so it worked like so:
.won, .keep, .discard {
vertical-align:middle;
}
Still, KingKing's answer helped me figure this out so thank you :)
I am new to css and started working on a few simple projects. I ran into a really weird issue styling buttons, though. The following code will not result in a link:
But for some reason, this will:
My question is basically, how in the world to you set the size of a link without having to use float? And why would float work?
Thanks!
It is because an 'a' element is usually displayed inline. You can over-ride it by using display:block;
More on 'display' here: http://www.w3schools.com/cssref/pr_class_display.asp
Regarding float:left;
When floating left, the browser automatically over-rides the display to be a block.
Since "a" is inline element, you must display it as an inline-block
a { display: inline-block; }
to keep it inline but be able to change it's dimensions, padding, margin and basically everything else that you could do with an "div".
There is a IE7 and lower issue with inline-block so you may want to use css "hack":
a {
display: inline-block;
*display: inline; //* stands for IE7 and will not affect Chrome, Firefox and other browsers including IE8+
*zoom: 1;
}
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.
I'm creating a tile-based game and am using block rendering to update a large list of tiles. I'm attempting to do this in the most simple manner, so I've been trying to work with HTML's default layouts. Right now I'm creating 'inline-blocks', omitting whitespace between the elements to avoid horizontal spaces in between them but when the blocks overflow and create a new line there is some vertical margining in which I do not know how to remove.
Example to make this a bit clearer:
http://jsfiddle.net/mLa93/13/
(Pretty much I just need to remove the spacing between the block rows while retaining the simple markup.)
In the effort of keeping your code as close as possible to how it was:
http://jsfiddle.net/mLa93/20/
Add line-height: 0 to #container.
Add the hacks to make display: inline-block work in IE7.
Use display: block and set float: left. See this fork:
http://jsfiddle.net/q5eSG/
Instead of using display: inline-block, simply float the div elements.
Then, you just need to clear the floats on your #container element, which I do so using overflow: hidden;
Check out the working example: http://jsfiddle.net/Ymz3m/