How to position two boxes side by side using
tags?

Question

im learning HTML and CSS right now. Now im trying to create a simple Layout, HEADER below that a A MENU BAR and below that a NAVIGATION BAR in the right and MAIN SECTION in the right Im not able to place the navigation bar and the main section side by side.

THE main section goes below the navigation bar and not on its side

The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<center>
    <div style="height:70px; width:800px; background-color:red; color:white; font-size:30px" align="center">
    <strong>WELCOME</strong>
    </div>
    <div style="height:30px; width:800px; background-color:blue; color:white; font-size:15px; top:80px" align="center">
        <div style="width:200px; float:left">
            <a href="">HOME</a>
        </div>
        <div style="width:200px; float:left">
            <a href="C:\Users\Harish\Desktop\c prog.html">liwjoejlsn</a>
        </div>
        <div style="width:200px; float:left">
            <a href="">lskdjflsd</a>
        </div>
        <div style="width:200px; float:left">
            <a href="">ABOUT</a>
        </div>
    </div>
</center>
<center>
    <div style="height:800px; width:800px; background-color:grey; color:white; font-size:10px; top:100px">
        <div style="height:800px; width:200px; float:left; border-style:solid; border-width:2px;">
            <ul>
                <li>Hello</li>
                <li>hey</li>
                <li>who is</li>
                <li>forgive</li>
            </ul>
        </div>
        <div style="height:800px;width:600px; float:left; border-style:solid; border-width:2px; left:200px;">
            <p>
                lsjdgfio jsldfkslj;do fsmi;odfml dsijfo siuldhf iofj s dofus <br> klsjhdfioy oasdilufilh aoudsfk <br> ksajhkdfjhu aosls
            </p>
        </div>
    </div>
</center>
</body>

</html>

Josan Iracheta · Accepted Answer

If you want to have two div elements side by side you should use float:left;. As far as your code is concerned, you are using old code, such as center and you should really start naming your div elements. It would also be better if you placed your css code on a separate file and called it from your html.

There's too much to cover from just one post, but I did write up some small demos so you can see how float:left; works. I also fixed your code so now you have the divs side by side.

FLOAT LEFT DEMO

YOUR CODE

mcmac · Answer

in this example you can use

display: inline-block;

How to position two boxes side by side using <div> tags?

Tags:

html

css

alignment

Harish R

2 Answers

Josan Iracheta

mcmac

Recent Activity

Donate For Us