Dividing the page into columns using inline block not working

Question

I want a solution by using inline-block not by using float:left.

    *{
     margin:0;
  padding:0;
 }
 body{
     margin:0;
  padding:0;
 }

 <div style="width: 50%;background-color: #4caf50;display: inline-block;">
     Section 1
    </div>

 <div style="width: 50%;background-color: #ff5722;display: inline-block;">
     Section 2
    </div>

Is there a solution ?

Trying to build columns with `inline-block` is a huge pain because `inline-block` elements respect white-space. You would need to make sure you don't include newlines or spaces between your closing and opening tags for the columns. I highly recommend finding a different solution. — Joseph Marikle, Nov 16 '17 at 15:33
You need to fight the *space between* inline block elements. **Round 1 - Fight!** Use html comments between elements in question (guide: https://css-tricks.com/fighting-the-space-between-inline-block-elements/). If they are still standing, refer to next round. **Round 2 - Fight!** declare `font-size: 0px` on `inline-block` elements, the space you get between inline block elements are character spaces - but remember to reset font-size for nested (children) elements. That should give you your knockout. — UncaughtTypeError, Nov 16 '17 at 15:36
**Post fight summary:** Your sibling elements are horizontally aligning because of the character space between them. — UncaughtTypeError, Nov 16 '17 at 15:37

score 2 · Answer 1 · answered Nov 16 '17 at 15:32

you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem

*{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
}

<div style="width: 50%;background-color: #4caf50;display: inline-block;">Section 1</div><div style="width:50%;background-color: #ff5722;display: inline-block;">Section 2</div>

score 1 · Answer 2 · answered Nov 16 '17 at 15:31

1

you can try to use a container and display: flex like in the following example:

.container {display: flex}
.one {background-color: red; width: 50%}
.two {background-color: blue; width: 50%}

<div class="container">
  <div class="one">div one</div>
   <div class="two">div one</div>
</div>

answered Nov 16 '17 at 15:31

DaFois

2,197
8
26
43

Thanks for answering. Flex is very new to me. Soon i will use it. – gowtham Balasubramanian Nov 16 '17 at 17:35

score 0 · Answer 3 · answered Nov 16 '17 at 15:34

inline-block takes into account the whitespace. You need to remove it in order to make this work

<div style="width: 50%;background-color: #4caf50;display: inline-block;">Section 1</div><div style="width: 50%;background-color: #ff5722;display: inline-block;">Section 2</div>

Dividing the page into columns using inline block not working

3 Answers3