The code
I'm making a grid of names out of divs, and to start off I made some fixed width boxes. Here's the relevant HTML:
#names {
background-color: rgb(191, 191, 191);
width:80%;
margin-left: auto;
margin-right: auto;
border: 1px solid green;
}
.row {
text-align: center;
border: 1px solid red;
background-color: rgba(255,0,0,0.2);
height:80px;
text-align: center;
}
.item{
display: inline-block;
text-align: center;
background-color: rgba(0,0,255,0.2);
width:50px;
height: 100%;
margin-left: 50px;
margin-right: 50px;
border: 1px solid blue;
}
<div id="names">
<div class="row">
<div class="item">hi</div>
<div class="item"></div>
</div>
</div>
For whatever reason, when there is text or an element in the divs, they are placed lower than if there is nothing inside them. In addition, the greater the height attribute is in .item, the farther down the divs are. This can be fixed with a negative margin-top, but it is likely to lead to problems in the future, and regardless I'd like to know the cause of this behavior.
Why is this happening? Why is it only happening with content inside the divs? Why does the height attribute have anything to do with it? Any info would be greatly appreciated!
The initial value of vertical-align is baseline.
From http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height:
vertical-align: baseline — align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Adding vertical-align: top; to .item should solve your problem. Also make sure to use box-sizing: border-box; to prevent the items to have a greater height than it's parent. http://codepen.io/anon/pen/eBNgWe
Related
.useless {
float: right;
clear: right;
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
display: flex;
justify-content: center;
height: 250px;
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
I have 2 divs inside a div that refuse to act as block elements. For some reason, they are displayed in-line, not below each other. Could you explain what is the cause for this, not only how to solve it?
Larger div has width and height set.
Smaller divs also have their dimensions set.
Display:block is used on all 3 divs.
I tried using float, didn't work.
I tried using clear together with float, didn't work.
The only thing that is working but terribly, is giving each of them position:relative.
You don't need to provide me with code, just please try to explain why this happens, what is the general problem, and how do you solve it, because to me, as a beginner, it doesn't make sense that they display each other sometimes below, sometimes next to each other.
It's because you use flex on the parent - the default for children of flex parent is to align next to each other, remove the flex and it will work.
I would also say that as your children are 100% width, there is no need for floating so you can remove that too
.useless {
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
justify-content: center;
height: 250px;
}
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
More information about flexbox
Flexbox playground (codepen)
Here is an example I'm working with:
http://jsfiddle.net/adyjzbuh/18/
Here is the code:
<div class="box1">
<div class="box2">Some text</div>
</div>
<div class="box1">
<div class="box2">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box3">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box4">Some more text, actually, 2 lines of textalicious text</div>
</div>
Here is the CSS:
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box3 {
display: inline-block;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box4 {
display: table-cell;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
As you can see, the first block does exactly what I want. The margins automatically adjust, the block is centered as intended. The issues come when there is multiple lines of text. When I use the same style for the next block with multiple lines of text, the block adjusts the width to 100% of the available space, leaving a big gap on the first line and block not appearing centered.
I tried changing the display to inline-block and table-cell but it does not work (as evidenced by the third and fourth block). I've searched everywhere for solutions and none have worked.
The outer container will always be 300px and the inner block will always have to be flexible and adjust to multi-line text. Any solutions/examples would be greatly appreciated, thank you.
EDIT I forgot to mention the client specifically wants the text to align to the left.
I would add:
text-align: center
or
text-align:justify
instead of:
text-align:left
Is that what you expected to look like?
You might want to put a max-width: 50%; on your innerboxes. The reason is your solution doesn't really work the way you want is your margins are set to auto, so the margin is calculated of the width. So if say your width would be 50% of the parent container (in this case .box1), the margins are automatically calculated to fill up the other 50%, 25% for each side.
Max-width could fix your problem, the innerboxes are still flexible, but only will take up 50% of the width.
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
max-width: 50%;
}
Not sure what you are looking for ultimately, but here is a working example, with using table method, like you have, but using
display:table;
display:table-cell;
accordingly with text aligned in the middle, and centered or left aligned.
I have a "container" div to which I gave margin:auto;.
It worked fine as long as I gave it a specific width, but now I changed it to inline-block and margin:auto; stopped working
Old code (works)
#container {
border: 1px solid black;
height: 200px;
width: 200px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="center MtopBig" id="container"></div>
New code (doesn't work)
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center MtopBig" id="container"></div>
DEMO fiddle.
It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
What 'auto' means:
Using auto for the horizontal margin will instruct the element to fill up the available space (source: http://www.hongkiat.com/blog/css-margin-auto/).
Why 'display: inline-block' does not center:
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
Why 'display: block' centers:
When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it 'available'). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.
Solution for 'inline-block' elements:
Elements with display: inline-block should be approached as characters. Centering characters/text can be done by adding text-align: center to their parent (but you probably knew that already...).
For elements with property display: inline-block;
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. [reference: CSS2§10.3.9]
margin-left:50%;
transform: translateX(-50%);
.container{
border:solid 1px red;
}
.container img{
display:inline-block;
margin-left:50%;
transform: translateX(-50%);
}
<div class="container">
<img src="https://placekitten.com/100/300" />
</div>
I have to divs floated, one is on the left, the other on the right. What i want to do (without js) is that the right div fills the available space (width: 100%). The problem is, that the left div has an dynamic width, else I could simply use margin-left.
I also tried display: table-cell; but that won't allow me to use margin, only border-spacing.
Any suggestion?
You can probably do it like this, works in IE8 and better, in FF, in Safari. You could use padding instead of margin, as in this example:
<style>
.c_0 {
display: table;
width: 100%;
border: 4px solid orange;
}
.c_1 {
display: table-cell;
width: 20%;
border: 1px solid red;
padding-right: 20px;
}
.c_2 {
display: table-cell;
border: 1px solid blue;
}
</style>
<div class="c_0">
<div class="c_1">
has a width and padding instead of margin
</div>
<div class="c_2">
has the rest
</div>
</div>
EDIT
This only works with "%" on the first row. I saw it too late, that you want pixels.
I'm trying to make the menu appear at the middle of 30px line but the problem is that I cannot move it from the top unless I use display: table-cell.
What is wrong here?
Style sheet file:
div.menu
{
width: 600;
height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
vertical-align: bottom
}
The menu code in my html file:
<div class="space"></div>
<div class="menu">
Home
Home
Home
Home
Home
</div>
<div class="space"></div>
line-height: 100px; set the height of your menu line. But keep enough space in horizontal dimension, otherwize you will get crazy view. Look forward to min-width, width or overflow-x rules.
div.menu
{
width: 600px;
/* Use line-height instead of height */
line-height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
}
div.menu a {
vertical-align: middle;
}
setting the line-height to the desired value fixes the issue but it is not a correct way to do it. It is just a hack. The correct way is to use vertical-align property (for all the anchors inside the menu div)
.menu a {
vertical-align: middle;
}
Check this fiddle. http://jsfiddle.net/sfz7d/
Tell me if it works for you.