Why does the first element get pushed down when its child contains text? Why inline-block behaves like this?
And how can I allign divs side-by-side while allowing them to have children? I want the grey box to have a list of elements one on top of the other, while still having everything aligned like this(it works fine if boxes don't contain children):
The example is here: http://jsfiddle.net/uwRwM/1/
.box {
display: inline-block;
}
Easy fix. Add overflow:hidden.
This will force the element to contain the text.
.box {
overflow:hidden;
}
Working jsFiddle demo
Alternatively, you can set vertical-align:top.
.box {
vertical-align:top;
}
Working jsFiddle demo
The reason this is occurring, is because the default vertical alignment of an inline-block element is baseline. Thus the reason it was on the bottom.
Related
I'm having trouble getting my divs to line up horizontally.
Here's my html doc: https://gist.github.com/Keenangp/9def2bd08eb6244bcf2d
I don't have enough rep to post the style sheet too, but it goes:
.container {
width: 80%;
margin: auto;
}
.column {
display:inline-block
}
.image {
display:inline-block
}
Here's the page: keenansportfolio.bitballoon.com/about
Some things I've tried while going through previous solutions here:
When I check the divs in Chrome dev tools, I see that the inline block property has been applied, and there are no errors in the console. I've tried removing the container rule, removing the container div, so the other divs aren't nested. I've tried using a smaller image, combining the property with float: left, and applying inline-block with the class>direct descendant as a selector. I've also tried each div by itself, and applying the vertical-align: top property in case the baseline was interfering with it, and opening it in different browsers.
This is for an exercise, and I wasn't told to edit any other values or add any other properties. I'm kinda stumped.
You want to align three columns in a row if I get it right.
You have to set width of each columns and sum of those are not supposed to exceed container's width. Set width for all three columns (ex:32%) and if you want to align them even if sum of their widths exceed the container's, add this property to container; white-space:nowrap.
You have to set 'div width' for "image","column" classes. For example,
.image, .column
{
display: inline-block;
width: 30%;
}
Say I have 3 divs side by side:
<body>
<div id="ok1">Content for id "ok1" Goes Here</div>
<div id="ok2">Content for id "ok2" Goes Here</div>
<div id="ok3">Content for id "ok3" Goes Here</div>
</body>
Then I apply a margin to one of them:
#ok1 {
display: inline-block;
margin-top: 20px;
}
#ok2 {
display: inline-block;
}
#ok3 {
display: inline-block;
}
Why is it that all three get a top margin?
This is because the two divs are inline with the first one. When you did display: inline-block; it moved the other two divs into a block with the first one.
If you take that out, it goes back to normal.
fiddle
thanks to #MosheKatz for the idea on inline-block
An inline formatting context is established between the elements, therefore the following applies:
9.4.2 Inline formatting contexts (w3.org)
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
The default vertical-align value for inline elements is baseline.
You could change this value to something like top, thus changing the results (example)
div { vertical-align:top; }
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.
I have this code:
<div id="one">
<div id="two">my text here</div>
</div>
I have styled the div with id=two and put a box around it. The problem is that it doesn't enclose the text but instead expands to the width of the outer DIV. Is there a way I can make it just size to match the text without specifying width?
You can either
#two {
display: inline; /* or 'inline-block' */
}
Or:
#two {
float: left; /* or right */
}
display: inline; stops the div being displayed as a block-level element, causing it to collapse (for want of a better word) to the size of its contents. If you use the alternative display: inline-block then the div retains its ability to have a defined width and height, which may be required for your layout. However it's worth noting that Internet Explorer 6 and 7 only accepts display: inline-block for those elements that are 'naturally inline.'
float has much the same effect; but using float might/will obviously affect the layout of the page, and may need to be cleared by subsequent elements.
display:inline-block;
This way you keep the block behaviour of your div.
I have a div with display:block in my css. This div block uses the align = "absmiddle" . It displays all the elements in 1 line in Chrome. However, in firefox, the elements are displyed on to the next line as well. How do I get them to display in 1 single line in firefox.
P.S: I have already tried display: inline but it does not bring it in 1 line.
<div class="one"><input name="elementone" value="1" align="absmiddle" class="subone" /></div>
Css is
div.one,div.subone{
display:block;
width:16px;
height:100%;
background-position:0 0px;
border:0
}
I'm a little unclear on what you're trying to accomplish - centering input elements in a div?
All you need is a text-align: center on container div that holds all the inputs [.one is the class that should have center text alignment in the case of your example html].
Note there are some issues with your css
div.one,div.subone{ /*div.subone refers to a div with the class subone - not an input like you have*/
display:block; /*divs are already block elements */
width:16px; /* may be the issue, why restrict the width? */
height:100%; /*basically meaningless */
background-position:0 0px; /*default*/
border:0
}
***Note: generally when you are trying to wrap a bunch of inline elements like inputs each inside their own div, there is another way to skin that cat. For instance, in this case if you have a number of divs with the class .one - they will show up on their own line because your css requires each div to display block.
I don't really understand your question but if you want multiple <div class="one"> in one line just float them left or right. However they will still jump to second line once the container div width is exceded. You could try and use a combination of white-space and overflow on the parent div.
But as I say - your problem is quite unclear from the question.