HTML DIV Position | Positioning a DIV with CSS

You can set the position of an HTML DIV along with many other HTML tags. The CSS property to physically set the position of a HTML DIV tag is called margin. Margin has several different properties for setting the position of an html DIV and other html tags.

HTML DIV Example

CSS for Positioning the HTML Divs

 #div1 {
   display:inline;
   float: left;
   width: 50px; height: 50px;
   margin: 0 55px 0 0;
   background:red;
}

#div2 {
   display:inline;
   float: left;
   width: 50px; height: 50px;
   margin-top: 15px;
   background:blue;
} 

Result:

The key differences to note in the CSS example above is you can specify 4 values at once in #div1 (top, right, bottom, left) or only specify one at a time, as was the case in #div2 (margin-top, margin-bottom, margin-right, margin-left). You can use margin in this manner to set the position of an html div, amongst many other html tags.

Share

Learn how to design amazing websites