This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm a novice and I just can't crack this one. I have three divs within a container div. They just won't line up neatly to make 100% - gaps appear between them, even though I've reset margin and padding to 0. As a result, the divs sometimes overflow.
I've stripped back the code to illustrate my problem simply.
body {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
.outsideDiv {
width: 100%;
color: white;
background-color: black;
}
.insideDiv {
display: inline-block;
width: 33%;
}
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
#div3 {
background-color: blue;
}
<body>
<div class="outsideDiv">
<div class="insideDiv" id="div1">width = 33%</div>
<div class="insideDiv" id="div2">width = 33%</div>
<div class="insideDiv" id="div3">width = 33%</div>
</div>
</body>
Live version.
I'm missing something obvious, right? Why are there thin gaps between the divs?
try changing you css like below
.insideDiv { display: inline-block; width: 33.33%; float:left;}
Related
This question already has answers here:
How can I correctly select the first or the last child with CSS?
(2 answers)
:last-child not working as expected?
(3 answers)
Closed 21 days ago.
When I view it in the browser, I find that the graphics of div1 are obviously larger than div2. If I change the css style of div2, I will find that div:last-child{} has no effect. I don't know what's going on, can someone help me?
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:first-child {
background-color: red;
padding: 10px;
}
div:last-child {
background-color: blue;
padding: 10px;
}
<div>1</div>
<div>2</div>
This is the screenshot:
It isn't uncommon to see unintended / unexpected results with:
:first-child
:last-child
:nth-child()
:nth-last-child()
if the pseudo-class selector the CSS architect requires is actually one of:
:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
If you explicitly want to select the last <div> of a parent element, the correct selector is:
div:last-of-type
If you want to use items selectively like last-first:child, you must first set a reference.
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
}
.container div:first-child {
background-color: red;
padding: 10px;
}
.container div:last-child {
background-color: blue;
padding: 10px;
}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
</div>
This question already has answers here:
3 inline-block divs with exactly 33% width not fitting in parent
(7 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
How can I show three columns per row?
(4 answers)
Closed last year.
Please help me understand this. Here is my HTML (body)
<body>
<main class="container">
<div class="row">
<div class="col">Sparky</div>
<div class="col">Vegeta</div>
<div class="col">Flufferpants</div>
</div>
</main>
</body>
Here is my CSS
* {
font-size: 25px;
/* box-sizing: border-box; */
}
body {
background-color: gray;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: lightgoldenrodyellow;
}
.row {
background-color: rgb(119, 103, 134);
width: 100%;
}
.col {
display: inline-block;
width: 33%;
height: 200px;
}
I am trying to have the 3 cols be on a single row, evenly spaced apart. I know this is easily done through flexbox, but I wanted to try using the width property manually.
Even when I set each of the col to be width 33%, it still rolls onto the next line. What's going on here?
https://jsfiddle.net/zd29ewb6/
Thanks
use display flex on the row
* {
font-size: 25px;
/* box-sizing: border-box; */
}
body {
background-color: gray;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: lightgoldenrodyellow;
}
.row {
background-color: rgb(119, 103, 134);
width: 100%;
display: flex;
}
.col {
width: 33%;
height: 200px;
}
using inline-block elements there always be a whitespace between the elements and you set your width 33% and adding the width of all the 3 divs its width
gets more then the parents width so it shift the third element to next line. so you can reduce the width of col like this.
.col {
display: inline-block;
width: 30%;
height: 200px;
}
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 years ago.
Below is the given html code,
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
First case - Below is the css code applied, without setting margin,
.row {
background: red;
}
.column {
#margin: 10px;
background: green;
}
.blue {
background: blue;
}
and the output is:
Second case - Below is the css code, after setting margin,
.row {
background: red;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
with the output,
Third case - Below is the css code, with overflow set as hidden
.row {
background: red;
overflow: hidden;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
with the output,
1)
In above second case, Why does the container having 2 div elements does not expand on top margin?
2)
In above third case, Why does the container having 2 div elements expand on top margin?
By placing an overflow:hidden on the containing element you are changing it's Block Formatting Context. Only a few styles do this.
I usually use this method to self clear modules.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I know many techniques for positioning divs side-by-side. However I've never understood why taking two border-box divs with width: 50% doesn't produce side-by-side divs. From what I understand of css, with margin, padding, and border out of the equation this should absolutely work.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div>
<div class="half right"></div>
What am I missing?
Edit:
As many people are pointing out, display: block will not give me side-by-side behavior. This was a mis-type. I meant to make everything inline-block
First you need to understand that elements in HTML based on display property are of 2 types -
Block (eg: div, p, h1 - h6..etc)
inline (eg: span..etc)
Block level elements appear one below another, or as you may call it being stacked below each other,
whereas,
inline elements are created on the same line unless they are specifically styled as display: block OR if they encounter a <br /> tag.
SOLUTION:
You can use the property display:inline-block
Problem: It will add white spaces and put the second div on the next line even with width: 50%;. Now, there are several ways to remove whitespaces, you can try any one of them.
Use float: lefton both the div's
body {
padding: 0;
margin: 0;
}
div {
height: 300px;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
float: left;
}
.half-new {
display: inline-block;
width: 50%
}
<h1>Using Float</h1>
<div class="half left"></div>
<div class="half right"></div>
<hr />
<h1>Using inline-block</h1>
<div class="half-new left"></div><!--
--><div class="half-new right"></div>
Two reasons:
Div elements are display: block by default
You have space between the elements and space takes up … um space.
Change the display property and remove the space.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
margin: 0;
display: inline-block;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div><div class="half right"></div>
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;
}