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
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Floating div help?

    Hi All,

    I'm trying to get my design to look like this graphic:

    This image here

    Now i'm just stuck on one thing getting the image 3 element to align properly. But whenever I try and do that my other floating images don't appear where they want them to - anyone help please?

    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=iso-8859-1" />
    <title>Template Website</title>
    <style type="text/css">
    /* Start the stylesheet */
    
    * {
        padding: 0;
        margin: 0;
    }
    body {
        font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
        background: #ECECEC;
        color: #000;
    }
    #logo,#logo2{
        display:inline;
        float:left;
        position: relative;
        z-index: 2;
        width:450px;
        margin:-114px 0 0;
    }
    #logo2 {
        float:right;
        margin:-80px 0 0;
        width:468px;
    }
    
    #menunav {
        width: 100%;
        border-bottom: 3px solid #FFFFFF;
        height: 32px;
        background: #000000;
        clear:both;
        display:table;
    }
    #header {
        width: 100%;
        background: #660066;
        height: 80px;
        clear:both;
        display:table;
    }
    #wrapper {
        margin:auto;
        width: 974px;
        border: 1px solid #cccccc;
        padding: 10px;
        background-color: #666666;
        min-height:200px;
        position:relative;
        z-index:2;
    }
    #content {
        clear:both;
        width:100%
    }
    </style>
    </head>
    <body>
    <div id="menunav"></div>
    <div id="header"></div>
    <div id="wrapper"> 
      <div id="logo"><img src="image1.gif" width="356" height="101" alt="Image" /></div>
      <div id="logo2"><img src="image2.gif" width="468" height="60" alt="Image" /></div>
      <div id="content"> 
        <p>Content</p>
      </div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please upload a demo to a host(at least a free host) and provide a link to it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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