Question

I am learning HTML. I was reading the <div> tag in a book. I understand how it breaks the website into vertical pieces but I have also seen examples where people use <div> tag at the sidebar. How does the <div> tag work horizontally?

Answer 1

To have them so they are side by side, you need to use CSS. A div element by default has the display property set to block. So therefore elements after it will usually appear below.

To setup a couple columns lets say you have the following:

<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>

You can setup the columns by applying CSS rules to the classes:

<style type="text/css">
    .container {
      width:500px;
    }
    .left {
      width:250px;
      float:left;
    }
    .right {
      width:250px;
      float:right;
    }
</style>

In short, im giving it a container to have a maximum width. It’s not required, but generally done this way. Then I set both divs to be half the width of the container, and i put float left on it. So all elements will stick beside it. The float right is optional. However, if you make the container wider, the right div will stick on the right hand side.