Aligning 2 DIV's

css Belgium
  • 10 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;

            }

     

     

  • 10 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.

“There are 10 types of people in the world, those who can read binary, and those who can't.”