I have a problem aligning DIV's vertically, when the contents within them have different height (although the DIV's themselves have a fixed size).
See HTML example here (with inline CSS)
I want the DIV's to "flow" like text, so I'd like to avoid using position:absolute if possible. I'm using display: inline-block to the DIV's won't collapse.
Add a vertical-align property - it doesn't matter which one, they all do the same thing, since they're the same size. If they're different sizes, use vertical-align: middle:
.collection_box {
vertical-align: middle; /* or top, or bottom, if they're the same size */
}
Float them to the left:
.collection_box {
float: left;
}
Related
DEMO can be found at:
http://www.bootply.com/VZ7gvA7ndE#
I set the height of div to 100px and want to show the label at the bottom of the div. I use
#contain-word-lab {
vertical-align: bottom;
margin-bottom: 5px;
}
However, this doesn't work at all. The label still align to the top of the div.
Does anyone have any ideas about this? Why vertical-align doesn't work here? Thanks!
Why vertical-align: bottom is not working alone
Since the height of the parent element is greater than the computed height of the label, Using vertical-align: bottom won't move that (inline) element to the bottom of the parent.
Because in an inline flow, vertical-align determines how the elements are positioned based on their parent's baseline; And using that property on the label won't alter the position of baseline of its parent.
Inline level elements (inline, inline-block) are sitting in their baseline by default. And if they have different heights, the tallest element will determine where the others whould be placed.
I.e. In an inline flow, the tallest element will affect/move the baseline of the parent:
Looking for a solution
Hence in cases where the parent has an explicit height, if we could have an inline child which has the exact same height as the parent (a full-height child), it would affect the inline flow and move the baseline down:
And in order to keep elements (including letters having descenders) within the parent, we should align them vertically by vertical-align: bottom; declaration.
10.8 Line height calculations: 'vertical-align' property
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom
margin edge with the parent's baseline.
bottom
Align the bottom of the aligned subtree with the bottom of the line box.
Putting it all together
Therefore you could create a full-height element (Personally I'd rather go with pseudo-elements) within the parent to align the label at the bottom.
EXAMPLE HERE
#contain-word-div:after {
content: "";
display: inline-block;
height: 100%; /* Let it be as height as the parent */
vertical-align: bottom; /* Align the element at the bottom */
}
#contain-word-lab {
display: inline-block;
vertical-align: bottom; /* Align the element at the bottom */
}
quick example
http://jsfiddle.net/oa2gmuq3/
if you add
position:absolute;
bottom:0px;
to the label it likes to keep it at the bottom
set it as position:absolute;
#contain-word-lab {
position:absolute;
bottom:5px;
}
Apply position:relative to the parent div and make your label as position:absolute.
#contain-word-div {
height: 100px;
position:relative;
}
#contain-word-lab {
position:absolute;
bottom:5px;
}
DEMO
vertical-align tends to work best when the containers are table/table-like elements (eg. table, tr, td, th) or inline text elements (eg span). However, because table elements for layout are not a good idea. We can make other elements function like them using the display:table; and display:table-cell; css properties.
Try applying the following css:
#contain-word-div {
height: 100px;
border: 1px solid black; /* added just for visualising position */
display:table;
}
#contain-word-lab {
display:table-cell;
vertical-align: bottom;
padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}
DEMO
vertical-align only applies to table cells. If you want to position an element at the bottom of its parent, you need to give it position: absolute; and bottom: 0;.
Try to do following
FIDDLE DEMO
#contain-word-lab {
vertical-align='bottom';/***Remove This***/
bottom:2px;
position:absolute;
}
The "bottom" won't work anyway :) Try just bottom, without ".
Plus your label needs a height too. Now it's auto height is used and this is exactly the font-size. I'd suggest adding a line-height: 100px; to your label.
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 8 years ago.
I have a web page of the following layout.
The sidebar on the left is of the following css:
.sidebar {
display: inline-block;
top: 0;
width: 200px;
height: 1000px;
}
and the content on the right of css:
.content { position: relative; display: inline-block; }
But on adding any content inside the sidebar, the layout becomes:
The sidebar goes downwards and can't even make it go up by changing the 'top' value.
How can i Align a sidebar successfully in the left side of the content?
You should use vertical-align: top; declaration instead for both inline block columns to keep them at the top, as follows:
.sidebar, .content {
vertical-align: top;
}
'vertical-align'
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
CSS top property is only applicable to none-static positioned elements. It doesn't have any effect on inline-blocks or any other inline level elements.
Try adding vertical-align: top;
try to use the fixed property:
posistion: fixed
Try to check the width of oyu content, if it properly fits into this 200px width.
If you have firebug on your browser should give a good hand on debuging it.
You need to use some sort of position rule or your top value has no effect. I would use position: absolute; . Using fixed is not ideal.
Alright, so I'm trying to make div elements align down the middle (between two images) without using tables (because tables shouldn't be used for styling/layout).
I have the following individual elements:
img
img
div
And I want the final output, using CSS, to be:
Seems simple, right? Well, the trick is that the scores to the left and right of the images are variable width, and I want the center of the rounded rectangle to slice right between the two images, regardless of the widths of the score values. (Thus, I can't just wrap a div around the whole block and use text-align: center. Would do me no good.)
As you can see in my example pic, there is more space between the edge of the rectangle and the score on the right than there is on the left, because the left score itself is wider.
Also note that the images expand slightly above and below the rectangle div, which is another reason why using a table wouldn't be ideal.
I've tried to accomplish this layout using combinations of margin-left: auto, margin-right: auto, display: inline-block, etc., but I can't get the centered effect I'm looking for.
Here is a jsfiddle to play with.
Your help is greatly appreciated!
Here's the deal:
.team should have width: 50% and should be floated left. Or right. Whatever.
The images should be floated toward the center. The one on the left should be floated right, the one on the right should be floated left.
The images should also have position: relative and a negative top.
.team should also have text-align set. The one on left should have text-align: right
The outer container should have overflow set to visible (which is the default - I just wanted to mention it because other answers told you to use overflow: hidden. Which would break your "outside the box" stuff).
That should get you what you want. And here's proof (started before you posted your fiddle)
UI elements (things that are not content) should be CSS backgrounds. Make a composite image and make it the background for a wrapping DIV, then make two inside it - one floated left, the other floated right and with a bit of margin and padding everything will work just fine.
<div class="wrapper">
<div class="scoreLeft"></div>
<div class="scoreRight"></div>
</div>
All of the inner child elements of your div should have float: left. Then, the parent div should have overflow: hidden. From there, you can then add additional margin's to the div img elements.
Here is an example solution. The idea is that you have a wrapper do the grey background and size the bar. You than have a div half the size and align the text towards the center while putting enough padding to allow for background images.
HTML
<div class="wrapper">
<div class="scoreLeft">1231231</div>
<div class="scoreRight">123</div>
</div>
CSS
.wrapper {
background: grey;
background-image:url('http://i.stack.imgur.com/4fkZv.png');
background-size:400px 50px;
height: 50px;
width: 400px;
display: table; //Allow for vertical align
table-layout: fixed; //Allow for fixed widths of children
}
.scoreLeft, .scoreRight {
color: white;
display: table-cell; //Allow for vertical align
vertical-align: middle;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; //Allow for 50% width with padding sitting inside the 50%. This can be mathed out so the width + padding * 2 = wrapper width and then you can use the default box-sizing.
}
.scoreLeft {
background-image:url('http://i.stack.imgur.com/CmWiD.png');
background-size:50px 50px;
background-repeat: no-repeat;
background-position:right;
text-align: right;
padding-right: 55px;
}
.scoreRight {
background-image:url('http://i.stack.imgur.com/Gkll9.png');
background-size:50px 50px;
background-repeat: no-repeat;
padding-left: 55px;
}
I'm trying to create a centered div with the content of that div (a few images) bottom aligned. Bottom aligning the content is already a tricky issue that I've resolved (using HTML image bottom alignment inside DIV container). However, the solution removed the centering of the div.
The way I was centering was using display: inline-block;
Original, before bottom aligning content:
http://jsfiddle.net/5NuBD/
The fix to bottom align was adding
display: table-cell;vertical-align: bottom;
New, with bottom aligned content, which is no longer centered:
http://jsfiddle.net/KurpZ/
I'm looking for a centered div that is also bottom aligned. It seems these two solutions are incompatible.
If the div can be a fixed width :
#wrapper {
text-align:center;
margin: 0 auto;
width: 230px;
}
I ended up setting the css to a fixed width, as suggested by Chris. I then used jquery to sum the widths of each image and manually set the .width() after the page loaded. This works.
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.