Aligning 2 DIV's

css Belgium
  • 12 years ago

     I'm trying to align 2 DIV's but Firefox is not showing it right. Any help?

            <div id="header">
                <img src="images/header.bmp" alt="Header" />
            </div>

            <div id="content">
                <div id="nav" >
                <p>eu</p>
                </div>
               
                <div id="site">
                <p>yiu</p>
                </div>
            </div>

            <div id="footer">   
            <p> dit is de footer </p>
            </div

     And the CSS code

    #content{
            width: 720px;
            margin:0 auto;       
            margin-top: 3%;
            text-align:center;
        }

        #nav    {
                float: left;
                border: 1px solid #000000;
                margin:0 auto;       
                text-align:center;
       
            }
        #site    {
                float: left;
                border: 1px solid #000000;
                margin:0 auto;       
                text-align:center;

            }

     

     

  • 12 years ago

    Hi there! If you're using "margin: 0 auto" you'll want to remove the "float: left" rule - this is probably what's causing the problem. However, generally you're only going to need to apply "margin: 0 auto" to the top-level element (ie #content) ... and then leave the #nav and #site as is? (with margins if you need to position within the fixed with of #content). So, something like

    #content { width: 720px; margin: 0 auto; }
    #nav { border: 1px solid #000; margin-left: 50px; margin-right: 50px; }
    #site { border: 1px solid #000; margin-left: 100px; margin-right: 100px; }

    Hope this helps?

Post a reply

Enter your message below

Sign in or Join us (it's free).

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“I invented the term Object-Oriented, and I can tell you I did not have C++ in mind.” - Alan Kay