SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Allignment issues with DIV elements

    Hello All,

    Wondering if anyone can help. I'm putting toegther a website and am having problems with two floating div elements:

    - div id="my_image"
    - div id="menu"

    Basically, I want the my_image element to sit inline with the ending text of the page and not overlap it while also being the same starting height as the wrapper div.

    And the menu div to sit inline with the W on the "Welcome Screen" text.

    Like this photoshopped version here I have created

    But depending on the screen resolution and the scale of the screen these move all over the place:

    View Page

    Can anyone please help?

    Thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Here is one way of doing it. You could just set the #my_image id on the image itself and then nest it in your top #wrapper div. Since that top #wrapper div is only 105px high you could absolute position the #my_image to the top right and it will hang out naturally since it is removed from the flow.

    Then just make sure you give proper margins or padding to protect the text from going under the AP image. I set a bottom margin on your h2 to push the first p tag down.

    Try this -

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Template Website</title>
    <style type="text/css">
    * { padding: 0; margin: 0; }
    
    body {font:12px/20px arial, verdana, sans-serif; background:#FFF }
    
    h1 { font-size:30px; line-height:36px; margin: 0 0 20px 0; color: #005EB3; font-weight:normal;}
    h2 { font-size: 18px; padding: 0 0 20px 0; color:#222; font-weight:normal;}
    p { color:#666; margin: 0 0 20px 0; }
    a { color:#ccc;text-decoration:none; }
    
    #wrapper { 
      margin: 0 auto;
      width: 970px;
      height:105px;
      border-top: 2px solid #EEE;
      border-left: 2px solid #EEE;
      border-right: 2px solid #EEE;
      padding: 10px;
      background-color: #FFF;
      position:relative;
    }
    
    img#my_image {
      position:absolute;
      top:0;right:0;
      z-index:1;
      width:280px;
      height:280px;
    }
    
    #menu {
      font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
      font-weight:bold;
      text-transform:uppercase;
      background:#EEE;
      width:100&#37;;height:35px
    }
    
    #menu ul {
      overflow:none;
      list-style: none;
      padding-top:5px;
      padding-bottom:1px;
      margin-left:210px;
    }
    #menu ul li {
      float:left;
      margin-left:10px;
    }
    
    #menu ul li a {
      color:#666;
      display:block;
      border:1px solid #FFF;
      border-radius: 16px;
      -moz-border-radius: 16px; /* Not for IE*/
      -webkit-border-radius: 16px; /* Not for IE*/
      text-align:center;
      padding: 4px 20px;
    }
    
    #menu ul li a:hover {
      color: #FFF;
      background: #CCC;
      border: 1px solid #ccc;
    }
    
    #maincontent { 
      margin: 0 auto;
      width: 970px;
      height:800px;
      border-bottom: 2px solid #EEE;
      border-left: 2px solid #EEE;
      border-right: 2px solid #EEE;
      padding:10px;
      background-color: #FFF;
    }
    h2 {margin-bottom:20px;}
    </style>
    </head>
    <body>
    
    <div id="wrapper">
        <img src="images/sd.jpg" width="435" height="100" alt="" />
        <img id="my_image" src="images/s.jpg" width="280" height="280" alt="" /> 
    </div>
    
    <div id="menu">
      <ul>
        <li><a href="#" title="Link Name 1">Homepage</a></li>
        <li><a href="#" title="Link Name 2">Link1</a></li>
        <li><a href="#" title="Link Name 3">Link2</a></li>
        <li><a href="#" title="Link Name 4">Link3</a></li>
        <li><a href="#" title="Link Name 5">Link 4</a></li>
      </ul>
    </div>
    
    <div id="maincontent">
    
    <h1>Welcome Screen</h1>
    
    <h2>Subheading</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam nunc. Aliquam gravida commodo varius. Etiam vel leo eu lectus semper luctus. Pellentesque accumsan mollis diam et elementum. Morbi vel fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam nunc. Aliquam gravida commodo varius. Etiam vel leo eu lectus semper luctus. Pellentesque accumsan mollis diam et elementum. Morbi vel fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    
    </div>
    <!--End maincontent-->
    
    </body>
    </html>


Bookmarks

Posting Permissions

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