I am trying to use display:inline-block to build 3 columns.
It works fine in the beginning, but when I add content to the first column it affects the rest of the layout and renders the rest of the columns at a lower level.
What can I do to avoid this?
.cont {
width: 500px;
height: 200px;
background: #666666;
}
.col {
display: inline-block;
width: 30%;
background: pink;
}
<div class="cont">
<div class="col">
test<br><br><br>
</div>
<div class="col">
col2
</div>
<div class="col">
col3
</div>
</div>
You should add vertical-align: top; CSS declaration to align the columns vertically at the top:
.cont span {
display: inline-block;
vertical-align: top; /* Vertically align the inline-block elements */
height:100%;
line-height: 100%;
width: 33.33%; /* Just for Demo */
outline: 1px dashed red; /* Just for Demo */
}
Here is a online demo.
Honestly, I'm not a fan of using inline-block to create columns on the page, because of the white spaces between them.
The float was being used for a while, but nowadays flex box or CSS grid can be an option.
You just have to set a width of 33% on the the column, this will constraint it to take up 33% of the entire width of the div.
http://jsfiddle.net/Ge6g7/1/
.cont {
height:60px;
background: #ffff88;
}
.cont span {
display: inline-block;
height:100%;
line-height: 100%;
width: 33%; /* Added Css */
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
I am building on the question originally asked here How to center horizontal table-cell with a slight modification.
Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle.
Changing vertical-align: middle; for .column does NOTHING. If I change display: inline-block; for .column to display: table-cell, it will align content in the middle, but then .column DIVs are no longer centered and widths are all broken (currently all a evenly set to 25%). Setting margin:auto; or text-align on parent does nothing.
I've been running around this for days. Your help is appreciated.
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
min-height: 1px;
}
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
width:100%;
text-align: center;
}
/* Creating columns */
.column {
display: inline-block;
vertical-align: middle;
min-height: 150px;
width: 25%;
text-align: left;
}
#a {
background-color: pink;
}
#b {
background-color: lightgreen;
}
#c {
background-color: lightblue;
}
<div id="container">
<div class="section">
<div class="columns-container">
<div class="column" id="a"> Contents A </div>
<div class="column" id="b"> Contents B </div>
<div class="column" id="c"> Contents C </div>
</div>
</div>
</div>
You could do it like the follows, it uses CSS3 Transforms, see the browser support details. And be aware of the white spaces thing on inline block.
JsFiddle demo
.container {
text-align: center;
margin: 0 auto;
}
.column {
display: inline-block;
width: 150px;
height: 150px;
}
.column > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
<div class="container">
<div class="column" id="a"><div>Contents A</div></div>
<div class="column" id="b"><div>Contents B</div></div>
<div class="column" id="c"><div>Contents C</div></div>
</div>
setting your .column's line-height to the height of the element is step one; so: line-height:150px vertically aligns the content.
Then, simply edit the text-align:left style declaration you have set on .column to text-align:center finishes the vertically alignment in this case.
here's a fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I have a simple example in which an outer DIV contains an inner DIV which has
display: inline-block;.
Because I have set the height of the inner div, I expect the outer div to take on the same height as the inner div. Instead, the outer div is slightly taller, as you can see from the fiddle. Question: Why is this happening and how can I "fill up" the outer div without setting its height explicitly?
My goal is to have the outer div expand and shrink based on the height of the inner.
.outer {
background-color: red;
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
Your .inner div has display: inline-block. That means it needs an inline formatting context around it. Inline layout produces struts, which make room for descenders. You can see how it fits if you put a character next to the .inner element: http://jsfiddle.net/bs14zzeb/6/
The default vertical-align is to have the bottom edge of the inline-block box lined up with the baseline of the surrounding text. Even if there is no surrounding text, the layout engine still has to make room for an entire line of text.
That's why these answers are suggesting that you play with the vertical-align property. Setting it to vertical-align: top, as one answer suggests, tells the layout engine to align the top edge of the inline-block box with the top edge of the line box. Here, since the line height is less than 140px tall, it gets rid of the extra space on the bottom. But if the height of a line is taller than that, you'll still have extra space underneath: http://jsfiddle.net/bs14zzeb/9/
When using inline-block don't forget to set a vertical-align property MDN
.outer {
background-color: red;
}
.inner {
display: inline-block;
vertical-align: top; /* tada!!!! */
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
Alternatively, use CSS flex:
.outer {
display: flex;
background-color: red;
}
.inner {
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
The default vertical alignment for inline elements is baseline, so you need to set it to top or middle:
.outer {
background-color: red;
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
vertical-align:top;
}
<div class="outer">
<div class="inner"></div>
</div>
It's because your #inner has a display property set to inline-block. To fix, change the display to block, or set the vertical-align property to top.
display: inline-block:
.outer {
background-color: red;
}
.inner {
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
vertical-align: 0:
.outer {
background-color: red;
}
.inner {
display: inline-block;
vertical-align: top;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
The problem is the display: inline-block; property. Try display: block; instead.
http://jsfiddle.net/bs14zzeb/7/
.outer {
line-height: 0px;
}
.outer{font-size:0} will do the job
.outer {
background-color: red;
font-size:0
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/5EcPK/
The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.
When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
There is a few ways to fix that:
1. No space between those elements
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
2. Using HTML comments
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>
3. Set the parents font-size to 0, and then adding some value to inline-block elements
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
4. Using a negative margin between them (not preferable)
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
5. Dropping closing angle
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
6. Skipping certain HTML closing tags (thanks #thirtydot for the reference)
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>
References:
Fighting the Space Between Inline Block Elements on CSS Tricks
Remove Whitespace Between Inline-Block Elements by David Walsh
How to remove the space between inline-block elements?
As #MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
good answer in css3 is:
white-space: nowrap;
in parent node, and :
white-space: normal;
vertical-align: top;
in div (or other) at 50%
exemple : http://jsfiddle.net/YpTMh/19/
EDIT:
there is another way with :
font-size: 0;
for parent node and override it in child node
EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:
<div id="left"></div><div id="right"></div>
Because there is a space between the elements. If you remove all whitespace, they will fit.
<div id="left">Left</div><div id="right">Right</div>
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
display:block;
or remove space between tags
<div id='left'></div><div id='right'></div>
or add
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
Please check below code:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>
It can be done by adding the css display:inline to the div that holds the inline elements.
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
So it would be safer to use display:inline;
Flexbox example - this would be used for the parent class holding the two side by side elements.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
Taken from Vertically centering a div inside another div
add float: left; to both div tags.
div {
float: left;
}