How to align text next to a “div” in HTML/CSS?

Question

I have put an image map to my website with multiple colours, so I wanted to make a "div" block and next to it an explanation of what that colour represents on the map. But, when I try to do it, the text just goes under the "div", like so:

 #dark_green {height: 40px; width: 80px; background-color: #009933; } #light_green {height: 40px; width: 80px; background-color: #00ff00; } #dark_red {height: 40px; width: 80px; background-color: #ff0000; } #light_orange {height: 40px; width: 80px; background-color: #ff8c1a; } 

 <div id="dark_green"></div> - Dark Green <br> <div id="light_green"></div> - Light Green <br> <div id="dark_red"></div> - Dark Red <br> <div id="light_orange"></div> - Light Orange 

How can I make the text align next to each of the "divs"?

Answer 1

With the markup you gave us here, just make all the boxes displaying as an inline-block .

Notice : Just add the things, which make an element unique, to an id . All the rest, which is the same for multiple elements, should be in a class . Why? If you want to make the box - let's say - 20px wider, you will have to edit every box-id at the moment, with my improvement in your code, you just have to edit the class once and you're all done .

Edit : Wrap your explanations into an element, a <span> would be just fine here. Then you are able to apply styles to them (position, color, etc.).

 .box { width: 80px; height: 40px; display: inline-block; vertical-align: middle; } .explanation { margin-left: 5px; vertical-align: middle; } #dark_green { background-color: #009933; } #light_green { background-color: #00ff00; } #dark_red { background-color: #ff0000; } #light_orange { background-color: #ff8c1a; } 

 <div id="dark_green" class="box"></div><span class="explanation">- Dark Green</span> <br> <div id="light_green" class="box"></div><span class="explanation">- Light Green</span> <br> <div id="dark_red" class="box"></div><span class="explanation">- Dark Red</span> <br> <div id="light_orange" class="box"></div><span class="explanation">- Light Orange</span> 

Answer 2

Worked for me:

 #color_box_wrapper{ display: table; } #color_box, #color_text{ display: inline-block; margin: 0; } #color_text{ display: table-cell; vertical-align: middle; } .dark_green { height: 40px; width: 80px; background-color: #009933; } .light_green { height: 40px; width: 80px; background-color: #00ff00; } .dark_red { height: 40px; width: 80px; background-color: #ff0000; } .light_orange { height: 40px; width: 80px; background-color: #ff8c1a; } 

 <div id="color_box_wrapper"><div id="color_box" class="dark_green"></div><p id="color_text"> - Dark Green</p></div> <br> <div id="color_box_wrapper"><div id="color_box" class="light_green"></div><p id="color_text"> - Light Green</p></div> <br> <div id="color_box_wrapper"><div id="color_box" class="dark_red"></div><p id="color_text"> - Dark Red</p></div> <br> <div id="color_box_wrapper"><div id="color_box" class="light_orange"></div><p id="color_text"> - Light Orange</p></div> 

https://codepen.io/TriggeredOnCode/pen/PGogEz