CSS: Aligning divs 2 on a line without using float [duplicate]
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>css
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 18 at 21:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>css
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 18 at 21:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
If you put your divs all inline your code will works. <div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
– Heichou
Jan 18 at 21:45
add a comment |
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>css
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>css
css
edited Jan 18 at 21:38
Toby
5,27142449
5,27142449
asked Jan 18 at 21:27
RayyRayy
62
62
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 18 at 21:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 18 at 21:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
If you put your divs all inline your code will works. <div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
– Heichou
Jan 18 at 21:45
add a comment |
If you put your divs all inline your code will works. <div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
– Heichou
Jan 18 at 21:45
If you put your divs all inline your code will works. <div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
– Heichou
Jan 18 at 21:45
If you put your divs all inline your code will works. <div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
– Heichou
Jan 18 at 21:45
add a comment |
4 Answers
4
active
oldest
votes
Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
add a comment |
display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>add a comment |
You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
add a comment |
If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
add a comment |
Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
add a comment |
Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
answered Jan 18 at 21:37
Walker LeiteWalker Leite
1366
1366
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
add a comment |
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid
– IvanS95
Jan 18 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases
– MaZoli
Jan 18 at 21:41
add a comment |
display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>add a comment |
display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>add a comment |
display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>answered Jan 18 at 21:41
TobyToby
5,27142449
5,27142449
add a comment |
add a comment |
You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
add a comment |
You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
add a comment |
You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}
You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}
answered Jan 18 at 21:33
MaZoliMaZoli
1319
1319
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
add a comment |
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
I’d rather not use flex-box...trying to accomplish with width and inline-block
– Rayy
Jan 18 at 21:36
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
flex-box is state of the art. inline-block is kind off a css hack.
– MaZoli
Jan 18 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble.
– MaZoli
Jan 18 at 21:38
add a comment |
If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
add a comment |
If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
add a comment |
If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
answered Jan 18 at 21:40
MaZoliMaZoli
1319
1319
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
add a comment |
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
I never new this. I didn’t think placing on a new line mattered. Thank you
– Rayy
Jan 18 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution.
– MaZoli
Jan 18 at 21:47
add a comment |
If you put your divs all inline your code will works. <div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>
– Heichou
Jan 18 at 21:45