Display inline-block next row not comming properly

Question

0.00/5 (No votes)

See more:

CSS

.div1{
    display: inline-block;
    width: 49%;
	border:1px solid red;
	height:250px;
}

.div2{
    display: inline-block;
    width: 49%;
	
	border:1px solid red;
}


.div3{
    display: inline-block;
    width: 49%;
	border:1px solid red;
	vertical-align:top;
	
}


.div4{
    display: inline-block;
    width: 49%;
	border:1px solid red;
}

HTML

<div class="div1">
  some content1
</div><!-- 
--><div class="div2">
  some content2
</div><!-- 
--><div class="div3">
  some content3
</div><!-- 
--><div class="div4">
  some content4
</div>

What I have tried:

There is gap between some content 2 and some content 4
So why blank space create I am able t understand

some content1 some content 2
Some content4

Some content 4

So theere gap between 2 and 4 why this gap created not able to understand
can any tell me please

Posted 19-Aug-17 19:11pm

Member 13368994

Updated 19-Aug-17 20:18pm

Patrice T

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Answer 1 · 2017-08-19T20:18:00

There is a gap between content 2 and content 4 because .div2 doesn't have a height set, and divs side-by-side are not automatically aligned.

There are two options: either you put a height on .div2, or you use flexbox. In my opinion, flexbox is the cleanest way to do this.

How to do that here: you wrap div1 and div2 in a parent div, and you give it the class row:

HTML

<div class="row"><div class="div1">
  some content1
</div><div class="div2">
  some content2
 </div></div><div class="div3">
  some content3
</div><div class="div4">
  some content4
</div>

And in your CSS, you add this:

CSS

.row {
  display: flex;
}

That's all you need here!

You can do a lot more with flexboxes. If you're interested, take a look at Using CSS Flexible Boxes - CSS | MDN[^]