CSS: Aligning divs 2 on a line without using float [duplicate]












-1
















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>












share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

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
















-1
















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>












share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

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














-1












-1








-1









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>












share|improve this question

















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

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 css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

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



















  • 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












4 Answers
4






active

oldest

votes


















0














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;
}





share|improve this answer
























  • 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



















0














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>








share|improve this answer































    -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;
    }





    share|improve this answer
























    • 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



















    -1














    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>





    share|improve this answer
























    • 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




















    4 Answers
    4






    active

    oldest

    votes








    4 Answers
    4






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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;
    }





    share|improve this answer
























    • 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
















    0














    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;
    }





    share|improve this answer
























    • 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














    0












    0








    0







    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;
    }





    share|improve this answer













    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;
    }






    share|improve this answer












    share|improve this answer



    share|improve this answer










    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



















    • 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













    0














    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>








    share|improve this answer




























      0














      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>








      share|improve this answer


























        0












        0








        0







        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>








        share|improve this answer













        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 18 at 21:41









        TobyToby

        5,27142449




        5,27142449























            -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;
            }





            share|improve this answer
























            • 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
















            -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;
            }





            share|improve this answer
























            • 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














            -1












            -1








            -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;
            }





            share|improve this answer













            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;
            }






            share|improve this answer












            share|improve this answer



            share|improve this answer










            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



















            • 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











            -1














            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>





            share|improve this answer
























            • 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


















            -1














            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>





            share|improve this answer
























            • 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
















            -1












            -1








            -1







            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>





            share|improve this answer













            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>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            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





















            • 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





            Popular posts from this blog

            Callistus III

            Ostreoida

            Plistias Cous