Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Aligning div's?

  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning div's?

    Hey all, just wondering, how does one float a div over another so that its ontop of another?

    I am trying to get this effect:


    But so far I can only float the menu (red) div left and right.

    HTML

    <!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" />
    <link rel="stylesheet" type="text/css" href="../public_html/pages/pseudo.css">
    <title>Pseudonym </title>
    </head>
    <body>
    <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
    </div>

    </body>
    </html>
    CSS:

    @charset "utf-8";
    /* CSS Document */

    *{
    margin: 0px;
    padding: 0px;
    }

    body{
    }

    .container {
    width: 800px;
    margin:auto;
    }
    .header {
    background-color:#0000FF;
    margin:auto;
    height:90px;
    }

    .content {
    background-color:#00CC00;
    height:150px;
    width: 200;
    }

    .sidebar {
    background-color:#FF0000;
    width: 280px;
    height: 150px;
    }

    .footer {
    background-color:#CC6600;
    height: 60px;
    clear: both;

    }
    I have tried absolute position, which made the menu stick, and thus destroy my layouts flow. I also tried using a wrapper div for the menu, but I haven't got it work so far.

    Cheers

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have you tried "z-index:?" to overlay one or the other divs?
    You will need to use position:absolute; and position your divs with code. The higher you make z-index: numerically, the nearer to the top.

    Done with my wysiwyg editor.

    Frank
    Last edited by effpeetee; 07-10-2008 at 09:47 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •