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/
Related
So I have two divs, on big screens they are side by side.
<div1> <div2>
On smaller screens, I want to get
<div2>
<div1>
I guess I could remove the float and put width:100% and display:block;. And the two divs are the one above the other, we are half-way there. But how I put the div2 above the div1 ? I tried putting opposite floats, one div floats right, the other left, but no luck.
Is negative margin a legit solution for a responsive web app where everything is fluid? I cannot get the div1 to go under the other, they always overlap. Or there is a more solid solution? Setting display: table-header-group; worked in the fiddle, but not in my project and I dont understand why. Doing it without CSS3 would be awesome.
Here is a fiddle
Thank you
I updated your fiddle
I added float:right; to both divs and i changed there order on the page like so:
<div id="amir">amir</div>
<div id="jake">jake</div>
and there is a second version when amir is on top here
You just have to swap the position of your HTML Divs as :
<div id="amir">Amir</div>
<div id="jake">Jake</div>
Here is the fiddle for you
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
I've got two table-cell divs next to each other, but for some reason one has what seems to be a giant margin-top that I'm not creating, and I don't have any idea why.
<div style="display:table;">
<div style="display:table-cell;">
<img src="http://a0.twimg.com/profile_images/3181865974/b3583cd60d3d21ea9b9776634084b710_normal.png" />
</div>
<div style="display:table-cell;">
<div>Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.</div>
</div>
JSFiddle: http://jsfiddle.net/HycBx/
You have both cells with the same height. The space on top is because the text is defaulting to a vertical align of "baseline".
Add the css to your cells:
vertical-align: top;
The default vertical alignment for the cells is the baseline. You will notice that the image and the first line of the text actually share the same baseline, hence the alignment. This is irrespective of the display property, and you can see the same behavior without splitting the display into cells:
http://jsfiddle.net/ExplosionPIlls/HycBx/2/
The simplest fix is probably to change both cells to have the same vertical alignment. I think vertical-align: middle works best.
http://jsfiddle.net/ExplosionPIlls/HycBx/3/
I'd like to horizontally align (for whatever screen resolution) the 2 main blocks.
One has a float:left.
If I set margin-left:auto to .site (main content block, at the right), it gets horizontally aligned. The problem is that I don't know how to have the sidebar (the block at the left) aligned too. It's difficult because I need to be sure that the menu gets perfectly "attached" to the content block (so I can't use position:relative;left:XXpx because it changes on different resolutions).
Any ideas? :)
EDIT: If possible, solutions that work with IE 7-8 too (unfortunately) :D
I might be missing something here, but you just want to get 2 block elements and make them center-aligned horizontally?
Just wrap them in another div and align that wrapper div with margin: 0 auto.
Check this link.
<div id="#wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
EDIT:
Of course that you have to float the Content div as well (and not only the Sidebar)