Menu
This question seems to have been answered a million times, and it seems to work a million times too. Not for me though. I would like to push together all the divs in
<body>
<div class="mainprogress">
<div class="detailprogress" style="height:100%;width:18%">
<div class="done" style="width:58%"></div>
<div class="late" style="width:41%"></div>
</div>
<div class="detailprogress" style="height:35%;width:81%">
<div class="done" style="width:73%"></div>
<div class="todo" style="width:26%"></div>
</div>
</div>
</body>
for this I'm using the following CSS
.mainprogress {
height:60px;
border:2px solid black;
}
.mainprogress div{
padding:0;
margin:0;
display:inline-block;
}
.detailprogress div {
height:100%;
}
.detailprogress .done {
background-color:lightgreen;
}
.detailprogress .donelate {
background-color:lightpink;
}
.detailprogress .late {
background-color:red;
}
.detailprogress .todo {
background-color:green
}
(fiddle here: http://jsfiddle.net/uhBW2/5/ ) when fiddling enough with negative margins, it seems to start working at some point, but it feels terribly hackish. How do I get the elements to align to each other?
607
Inline-block inserts a natural space between items. In fact, it's essentially the width of a space if you were to hit the spacebar in your content, or even typing (an html markup space). This space will be smaller or larger dependent on your font size.
There are several fixes to this problem, and I personally as well as many others consider this problem to be a sort of "bug" that needs fixing. That said, all of the fixes for this are very "hackish" so to speak. The solution you choose is up to your personal preference.
Simply switch over to using floats instead. Instead of setting display: inline-block; do this:
http://jsfiddle.net/uhBW2/9/
.mainprogress div{
padding:0;
margin:0;
float: left;
}
(Note that in the JDFiddle solution using margin-left that the first div also moved left when it should not have done so. To counteract this problem you will need to implement a class on that first div and make that -4 value 0 for that div alone. Another solution, and my preferred solution, would be to use the :first-child structural pseudo-class to select that first div. It is more dynamic, and doesn't require HTML to be modified.
margin-left: -4px; -- http://jsfiddle.net/uhBW2/10/
font-size: 0px; - http://jsfiddle.net/uhBW2/11/
word-space: -.25em; (See PavloMykhalov's comments below) -- http://jsfiddle.net/uhBW2/13/
***Note to other developers: If there are other solutions to this please post below and I will add it above. I feel like I'm missing a 5th way of fixing this...
70
The space is created because you've set the divs to "display: inline-block".
Read here how to fix:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
40
Try using floats instead of inline-block, wider support and it actually works:
http://jsfiddle.net/uhBW2/7/
.mainprogress {
height:60px;
border:2px solid black;
overflow: hidden;
}
.mainprogress div{
padding:0;
margin:0;
float: left;
}
You need to Add float:left to all the Elements that you need to push together like below:
.mainprogress {
height:60px;
border:2px solid black;
}
.mainprogress div{
padding:0;
margin:0;
display:inline-block;
float:left;
}
.detailprogress div {
height:100%;
float:left;
}
.detailprogress .done {
background-color:lightgreen;
float:left;
}
.detailprogress .donelate {
background-color:lightpink;
float:left;
}
.detailprogress .late {
background-color:red;
float:left;
}
.detailprogress .todo {
background-color:green
float:left;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
