This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 9 years ago.
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
.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
}
<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>
Fiddle here
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?
Background:
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.
Suggested Solution per your particular situation and code:
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;
}
Other solutions:
(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.
Fix the margin space by adding margin-left: -4px; -- http://jsfiddle.net/uhBW2/10/
Fix the space by shrinking the space using font-size: 0px; - http://jsfiddle.net/uhBW2/11/
Fix the space by deleting the line breaks between your div's (NOT RECOMMENDED - HARD TO READ) -- http://jsfiddle.net/uhBW2/12/
Fix the space by using 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...
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/
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;
}
.detailprogress div {
height: 100%;
}
.detailprogress .done {
background-color: lightgreen;
}
.detailprogress .donelate {
background-color: lightpink;
}
.detailprogress .late {
background-color: red;
}
.detailprogress .todo {
background-color: green
}
<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>
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;
}
Related
I'm currently trying to create a responsive form with an text field and a button next to each other, where the text field takes up the maximum available space and the button just uses what it needs.
This tutorial is what I've used so far to achieve this and its worked perfectly.
My issue is that this isn't really a responsive solution as if you remove the float using a media query to stack the field and button on top of each other, the button stacks on top of the text field instead of the other way around.
Here's a flexbox example I quickly whipped up. This is exactly how I need it to function but in a way that will work on IE8+ please.
Thank you
-
EDIT:
The button is content managed so using calc will not work in this instance & could contain multiple words which cannot break onto two+ lines.
Using percentage widths do not take into account the text inside the button. The button only needs to be the width of the text & padding. With a percentage there will either be excessive spacing on the button or there's a chance that multiple words inside the button will break onto two lines, I really need to keep them on one line which is where the non-responsive solution in my question comes in really handy. Unfortunately I really need it to be responsive. The button will always stay the same width no matter what size the container is, just the textbox that needs to adjust.
Does anyone know a way of achieving this please Preferably >IE8 (so no flexbox unfortunately)
-
What I have so far
https://jsfiddle.net/ncpk6qp9/
.container {
width: 300px;
border: 1px solid;
}
.left {
width: auto;
background: red;
overflow: hidden;
}
.right {
width: auto;
background: blue;
float: right;
}
.textbox {
width: 100%;
}
#media only screen and (max-width: 300px) {
.right {
float: none;
}
}
<div class="container">
<div class="right">
<input type="submit" />
</div>
<div class="left">
<input type="text" class="textbox" />
</div>
</div>
You can use percentage as width and display: inline-block;
Also, make sure you use font-size: 0px on the wrapper to remove inline-block spaces.
.container {
width:600px;
height:200px;
border:2px solid yellow;
font-size: 0px;
}
.left {
width:70%;
height:200px;
background:red;
overflow:hidden;
display: inline-block;
}
.right {
height:200px;
width:30%;
background:blue;
display: inline-block;
}
JSFiddle link
I can not test in old IEs, but I think that setting the div to position: relative when you reset the float should work.
I have changed the media query to work on hover, it's easier to check
.container {
width: 300px;
border: 1px solid;
}
.left {
width: auto;
background: red;
overflow: hidden;
}
.right {
width: auto;
background: blue;
float: right;
}
.textbox {
width: 100%;
}
.container:hover .right {
float: none;
position: relative;
top: 20px;
}
<div class="container">
<div class="right">
<input type="submit" />
</div>
<div class="left">
<input type="text" class="textbox" />
</div>
</div>
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
This question is probebly asked a hundred times already so I appologise for asking it again. The other questions simply didn't help in getting my problem solved. Been trying for like 2 hours now so I'm a bit frustrated and realy need some help.
I've got a section with 2 divs inside. I'm trying to get the left div to be 100% - 200px and the right div in whatever is left over. But no matter what I try the divs keep on wrapping around their content.
I've put up a jsfiddle to keep this question a bit short:
http://jsfiddle.net/nttzV/1/
This is the css part that's needed:
section {
width: 100%;
height: 100%;
border: 2px solid green;
}
.box1 {
float: left;
width: calc(100% -200px);
border: 2px solid red;
display: block;
}
.box2 {
float: left;
margin-left: 5px;
width: 180px;
border: 2px solid blue;
display: block;
}
You just need a space after the minus in calc:
width: calc(100% - 200px);
You want "left div to be 100% - 200px and the right div whatever is left over". The left-over area will always be 200px.
Instead, try making the right <div> 200px and the left <div> whatever is left over. Then you don't need to use calc(), whose browser compatibility is somewhat limited.
Something like this:
<section>
<div class="boxR"></div>
<div class="boxL"></div>
</section>
section {
min-width:300px;
}
div.boxR,
div.boxL {
min-height:200px;
}
div.boxR {
float:right;
width:180px;
background-color:#CCC;
}
div.boxL {
margin-right:200px;
background-color:#555;
}
WORKING EXAMPLE
How do I put the smiley(yellow background) immediately after the centered word Peter(red background) in this example?
If you give .name the position: relative property, you can declare a pseudo-element for it, which is absolutely positioned.
.name:after {
position: absolute;
left: 100%;
background: yellow;
content: ': )'; /* the space is non-braking */
}
http://jsbin.com/urodit/20/edit
You should be able to do it with floats like this: http://jsbin.com/urodit/26/
Some googling of 3 column layouts may help you find ideas if this isn't exactly what you want too.
.toggle-me {
background-color: green;
float:left;
}
.name {
background-color: red;
float:left;
width:40px;
margin:auto;
}
.description {
background-color: yellow;
width: 20px;
float:left;
}
.container-one{
float:right;
width:100%;
}
.favourite-food {
background-color: orange;
float:left;
}
Check this http://jsbin.com/urodit/30/edit
Added .container-one { text-align: center; } and .name { display: inline-block; } to center the name. Then .description { display: inline-block; } to make it go after the name. Also removed .name { margin: auto; } because it's no longer necessary. And added .name { text-align: left; }.
Note the HTML comment after .name and before .description:
<div class="container-one">
<div class="toggle-me">|Toggle|</div>
<div class="name">Peter</div><!--
--><div class="description">: )</div>
</div>
This is to remove the white space between inline-block elements, caused by the line-breaks and indentation of the code itself. If you don't want to remove the white space just remove the HTML comment.
This is an ugly solution. It is not a nice solution since you need to fiddle with the width of the element that is floated on the right. You also need to put the element that will be on the right of your centered element before the centered element in your html.
If anyone is able to post a cleaner solution I will accept that answer instead of this one.
I am having some problems with placing two divs one below another.
I tried out some solutions found in Stackoverflow like below.
But Nothing seems to be working.
Code:
#wrapper {
position: absolute;
}
#up {
position: absolute;
float: left;
}
#down {
position: absolute;
float: left;
clear: left;
}
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
Here's My Attempt,
Fiddle
Helps would be appreciated.
Remove the CSS. DIV tags are block elements and would naturally flow down the page. You are floating them which would cause them to be displayed side by side.
Especially remove the "float" attributes.
That's how DIV's work by default, just remove your css. See a working example here: jsfiddle
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
I'm not sure if you want the outer div to be greater than the height of the page, but that's what this does:
#DivSlider
{
width:100%;
position:absolute;
height:170%;
background-color:green;
}
#DivHome
{
height:26%;
background-color:orange;
border:1px solid black; /* You were missing the 'px' here */
}
#DivSkills
{
height:25%;
background-color:white;
border:1px solid black;
}