CSS inline-block grid -

I just started learning html and css. I'm trying to create a 3x3 grid with the inline block "method": This is the code so far:

HTML:

  & Lt ;! Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link href = "ex.css" rel = "stylesheet" type = "text / css" & gt; & Lt; Title & gt; Pre & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "r1" & gt; & Lt; / Div & gt; & Lt; Div id = "r2" & gt; & Lt; / Div & gt; & Lt; Div id = "r3" & gt; & Lt; / Div & gt; & Lt; Div id = "r4" & gt; & Lt; / Div & gt; & Lt; Div id = "r5" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

CSS:

  # r1 {background color: blue; Height: 300px; Width: 300px; Display: Inline-block; } # R2 {background-color: red; Height: 300px; Width: 300px; Display: Inline-block; } # R3 {background color: blue; Height: 300px; Width: 300px; Display: Inline-block; } # R4 {background color: green; Height: 300px; Width: 300px; } # R5 {background color: yellow; Height: 300px; Width: 300px; }  

Can someone help me in the position of # r5 (yellow box) near horizontal # r4 (green box)?

It can not be sexy, but for the basic purposes you can add only three points:

  & lt; Div id = "r3" & gt; & Lt; / Div & gt; & Lt; Br> & Lt; Div id = "r4" & gt; & Lt; / Div & gt;  

The second option (perhaps more appropriate) is to set a fixed width for the container, which is in your example:

  body {width: 1000px ; }  

will take care of breaking the box, so each of them can be inline-block.

And by the way, you do not need to keep all the rules duplicate, try it:

  div {display: inline-block; Height: 300px; Width: 300px; }