HTML layout - display: inline-block instead of float not working

Question

Sry for the bad title, I couldn't come up with something more descriptive...

I have four types of content, each one in a separate div like this:

<div id="item1">
  some content
</div>
<div id="item2">
  some content
</div>
<div id="item3">
  some content
</div>
<div id="item4">
  some content
</div>

I want to place them so #item1 & #item2 sits next to each other on the first row and #item3 & #item4 next to each other on the second row (forming a square together).

I know how to do this with floats:

#item1, #item3 {
  float: right;
}

but our teacher want's us to use "display: inline-block" for this website. I've tried to find and answer but the only thing I could come up with was to put the items in sets of two:

<div id="content1">
  <div id="item1">
    some content
  </div>
  <div id="item2">
    some content
  </div>
</div>

<div id="content2">
  <div id="item3">
    some content
  </div>
  <div id="item4">
    some content
  </div>
</div>

  #item1, #item2 {
    display: inline-block;
  }

  #item3, #item4 {
    display: inline-block;
  }

And that's not an option since I need to be able to move elements individually by using media queries :/ for example float #item1 in a separate direction on the homepage while #item2 moves elsewhere, I hope you understand what I mean.

EDIT To clearify I want "lemon" to be right under "apple": https://jsfiddle.net/1hj3L018/1/

Be aware some space may be inserted between your elements. See How to remove the space between inline-block elements? — Oriol
– Oriol, Commented Jan 18, 2016 at 0:31

RPL · Accepted Answer · 2016-01-18 00:20:11Z

1

You could use display: inline-block but you should be aware of the whitespace issue this causes. Here is some info on that.

The code below should achieve the result you seek

div {
  display: inline-block;
  width: 50%;
}

<div id="item1">
  item 1
</div><div id="item2">
  item 2
</div><div id="item3">
  item 3
</div><div id="item4">
  item 4
</div>

answered Jan 18, 2016 at 0:20

RPL

3,6872 gold badges23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenneth · Accepted Answer · 2016-01-18 00:23:39Z

0

You can use inline-block and a percentage for the width:

div{
    display: inline-block;
    width: 50%;
}

That should make item1 and item2 span the first row and item3 and item4 the second row.

EDIT: That is if you really stick them next to each other, without any whitespace in between. There's a few methods to do that (see Ryan's answer). If you want to keep your formatting here's another trick to do that:

<div id="item1">
  some content
</div><!-- 
--><div id="item2">
  some content
</div><!-- 
--><div id="item3">
  some content
</div><!-- 
--><div id="item4">
  some content
</div>

This works because now the parser see everything between the closing and end tag as an HTML comment instead of a whitespace

edited Jan 18, 2016 at 0:23

answered Jan 18, 2016 at 0:15

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

3 Comments

Dinobot Over a year ago

I marked this as accepted answer to fast. Here is to clarify my prob sry for lack of info from my side :/ jsfiddle.net/1hj3L018/1 I want lemon to be right under apple

Kenneth Over a year ago

You can't do that without floats. The only other option is using a javascript library like masonry: masonry.desandro.com

Dinobot Over a year ago

Thx Kenneth, I'll use floats in that situation then and comment to my teacher why I needed to do so.

Collectives™ on Stack Overflow

HTML layout - display: inline-block instead of float not working

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related