HTML Div Layout

The HTML div element is a block level element used for grouping HTML elements.

Other examples in Layout (Advanced HTML)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
        .leftside
        {
            background-color: #FFD700;
            width: 50px;
            height: 150px;
            float: left;
            vertical-align: top;
        }
        .header
        {
            background-color: #726959;
            text-align: center;
            
        }
        .content
        {
            background-color: #860404;
            height: 150px;
            width: 250px;
            float: left;
            vertical-align: top;
        }
        .footer
        {
            background-color: #726959;
            text-align: center;clear:both;
        }
    </style>
</head>
<body>
    <div style="width: 300px">
        <div class="header"> <b>Header title</b>  </div>
        <div class="leftside"> Left side</div>
        <div class="content">Content is here</div>
        <div class="footer">Footer text</div>
    </div>
</body>
</html>

^1.0

^1.0

^1.0

^4.0

^6.0

HTML Div Layout

Useful Information