In the fiddle below I have two inline-block DIVs that are the same size. They have overflow set to auto and have content in them. The second DIV has a rather large Y offset but I can't figure out why. They should just be right next to each other.
http://jsfiddle.net/nT4ku/
Any ideas?
Specifying a vertical-align on the side-by-side inline-block divs should fix this for you. vertical-align: top;
Here's my edit to your jsfiddle: http://jsfiddle.net/nT4ku/1/
Related
How to make a div to float vertically? If there is empty space above a div then it should go up and fill up the space leaving the empty space at the bottom.
float:left // for floating horizontally
I have many div which are floating horizontally with a fixed width but not a fixed height. I want them to be arranged without leaving the empty space.
How can this be done?
A div would never leave empty space above itself. It will fill the space and then the document would go on to the bottom.
I guess, there is some sort of padding or margin there.
You can try to give the divs an absolute position as:
div {
position: absolute;
top: 0;
}
This way, div will be placed almost to the top of the page! Overlapping other elements, You can give some value to top in such a way that you're giving margin-top.
I hope it helps.
Let me assume you're experiencing the following problem: you have some divs with different heights one after another in several rows. Say, there's a very tall in the first row, forcing all the divs of the second row to "dive" deeper. I have a strong feeling, that there's no cross-browser pure-css way to improve this look much at the moment. However, you can achieve at least something with
display:inline-block;
vertical-align:top
instead of
float:left.
It will look like this:
http://jsfiddle.net/wHTQ2/
if you need something better looking, please, see this question:
css float elements with unequal heights left and up in grid
I believe it's the same thing that you're looking for. Unfortunately, there's not much you can do with pure css
I have 3 <div> blocks placed side by side. They are identical with the only difference being that the last <div> (on the far right) has a bit more text in it. However, all the blocks have a fixed width and height. For some reason, the last <div> is placed higher than the rest. I cannot figure this out for the life of me!
See here: http://jsfiddle.net/ZrSF4/
Any ideas?
You should apply vertical-align: top to all the divs: http://jsfiddle.net/ZrSF4/1/
You have to vertically align then, e.g. vertical-align:top;
http://jsfiddle.net/ZrSF4/2/
When I set min-height and "vertical-align: middle;" the text is not aligned vertically.
First example: http://jsfiddle.net/pkaXR/
How should I change css align image and text vertically ?
min-height sets the minimum height of a block.
vertical-align sets the position of inline content on a line.
Perhaps like http://jsfiddle.net/rPsEJ/26/ - I'm not sure I understood the question right though. ;-) As far as I know, vertical-align only applies to table cells.
I have something similar to below:
<div style="float:left;margin-left:5px;">Test</div>
The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.
Example of the issue: http://jsfiddle.net/ruh7z/1/
Any help with this would be great, thanks
That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell.
.container div
{
display: table-cell;
padding-left: 5px;
}
Here's a sample of this in use.
put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.
Not a front-end UI but have a (probably) very easy problem to fix. Here is a jsfiddle of it: http://jsfiddle.net/trestles/U7mYT/ I have two floated elements shown in this screen shot. One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn't expand out the box to push down the container. The index-right-content is posistion:relative. The index-right-content is the blue dashed border.
thx
edit #1
fiddle of it: http://jsfiddle.net/trestles/U7mYT/
I think the issue is the 'index-box right' which is right floated needs some way to clear itself but adding a clear:both didn't seem to do it.
don't do this full-time so thx for any help
I don't know why you should use positioning for the div index-right-content. Also, the width is more than it should be... I think I see 640px for the width, which I think is unnecessary, provided that the widths of the columns inside this div is defined.
see the updated jsfiddle adding float to both inner columns in container.