CODEWITHSUNDEEP
htmlcss
user1219387
user1219387

Reputation: 135

Aligning 2 div's side by side

I have a problem getting 2 divs to align side by side. From what I understand, using "float: left" should do it, but it does not - the divs appear on top of each other. I though it may be the browser, but I tried it on FF, Opera, and IE and result is the same.

here's my code

<head>
    <style>
        div.container{
            position: relative;
            width:800px;
            height: 1000px;
            background-color: red;
            overflow: hidden;
        }

        div.banner{
            position: relative;
            align:left;
            width: 800px;
            height: 100px;
            float:left;
            background-color: blue;
            clear:both;
        }
        div.navBar{
            position: absolute;
            width: 200px;
            height: 300px;
            float:left;
            background-color: yellow;
            clear: left;
        }

        div.content{
            position: absolute:
            width: auto;
            height: auto;
            float:left;
            background-color: orange;
            clear: right;
        }
    </style>
</head>

<body>
    <div name="banner" class="banner">
        This will be the banner
    </div>

    <div name="container" class="container">
        <div name="navBar" class="navBar">
            This will be the navbar
        </div>

        <div name="content" class="content">
            This will be the content
        </div>

    </div>
</body>

All divs are different color so its easier to see what will go where.

Upvotes: 0

Views: 1036

Answers (2)

Shawn Taylor
Shawn Taylor

Reputation: 3969

Here is a complete layout including footer which most probably you'll need. And yes with absolutely no clutter. :)

<div name="banner" class="banner">
This will be the banner
</div>

 <div name="container" class="container">
 <div name="navBar" class="navBar">
     This will be the navbar
 </div>

 <div name="content" class="content">
    This will be the content
  </div>
  <div name="footer" class="footer">
     Footer
  </div>


      div.container{
        width:800px;
        height: 1000px;
        background-color: red;
    }

    div.banner{
        width: 800px;
        height: 100px;
        background-color: blue;
    }
    div.navBar{
        float:left;
        width: 200px;
        height: 300px;
        background-color: yellow;
    }

    div.content{                      
        float:left;
        background-color: orange;
    }
    div.footer{                     
        clear:both;
        background-color: blueviolet;
    }

http://jsfiddle.net/L4Zjh/1/

Upvotes: 2

Nirmal
Nirmal

Reputation: 9549

The position:absolute is what making them overlap.

Remove the absolute positioning, and it should work fine.

See here in action: http://jsfiddle.net/5ULsG/

Upvotes: 2

Related Questions