why won't this div align work?

Discussion in 'HTML & Website Design' started by disgust, Apr 9, 2006.

  1. #1
    edit: please see this post for the most up to date version of the problem
     
    disgust, Apr 9, 2006 IP
  2. falcondriver

    falcondriver Well-Known Member

    Messages:
    963
    Likes Received:
    47
    Best Answers:
    0
    Trophy Points:
    145
    #2
    try to place your ad in the same p-element like the text (not sure about this)
     
    falcondriver, Apr 9, 2006 IP
  3. disgust

    disgust Guest

    Messages:
    2,417
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    0
    #3
    found the problem.

    the other site was using css with float, not just div align. oops.

    edit: thought I had it fixed, but I guess not
     
    disgust, Apr 9, 2006 IP
  4. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,334
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #4
    You can't "align" a div. Instead use CSS attribute "float".

    For example, make the div tag before the ad this:
    <div style="float: right">
    HTML:
     
    digitalpoint, Apr 9, 2006 IP
  5. disgust

    disgust Guest

    Messages:
    2,417
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    0
    #5
    disgust, Apr 9, 2006 IP
  6. penagate

    penagate Guest

    Messages:
    277
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hi,

    It is because your IFrame is too wide, and you have a few unnecessary attributes on it.

    Get rid of the <div> around the <iframe> and change the <iframe> tag to more like this:
    <iframe style="float:right;" name="google_ads_frame" src="..." frameborder="0" width="300"></iframe>
    HTML:
    And alter the width attribute as necessary. That should hopefully solve your problem.

    - P
     
    penagate, Apr 9, 2006 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    I would have sworn I'd answered this already. I must not have hit submit!!!

    Anyway, yeah, you do have to size things. Here was my non-table solution. I haven't done a table layout in over three years, and doubt I could anymore. You'll likely have to switch it back to iframe, since IE has sh*tty support for object.
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <title></title>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
            
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
    <style type="text/css">
    /*<![CDATA[*/
    
    html, body {
        margin: 0;
        padding: 0;
        }
    
    body {
        font: 100% verdana, helvetica, sans-serif;
        color: #666;
        background-color: #ccc;
        }
    
    p {
        font-size: 1em;
        margin-bottom: 0;
        }
    
    h1 {
        margin: 0 0 1em 0;
        font-size: 1em;
        }
    
    h2 {
        margin: 0 0 1em 0;
        font-size: 1.2em;
        background-color: #fffcff;
        border: solid #666;
        border-width: 1px 0;
        padding: 1px;
        }
    
    object {
        width: 100%;
        border: 0 none;
        height: 300px;
        }
    
    #wrapper {
        display: table;
        width: 760px;
        margin: 25px auto;
        background-color: #fff;
        }
    
    #nav {
        width: 180px;
        float: left;
        border: solid #666;
        border-width: 0 1px 1px 1px;
        }
    
    #main {
        border-left: 1px solid #666;
        margin-left: 181px;
        padding: 0 10px;
        }
    
    #ads {
        float: right;
        width: 340px;
        }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
      <div id="wrapper">
        <div id="nav">
          <h2>For Readers</h2>
    
          <ul>
            <li>list item</li>
    
            <li>list item</li>
    
            <li>list item</li>
          </ul>
    
          <h2>For Writers</h2>
    
          <ul>
            <li>list item</li>
    
            <li>list item</li>
    
            <li>list item</li>
          </ul>
    
          <h2>User CP</h2>
    
          <ul>
    
            <li>list item</li>
    
            <li>list item</li>
    
            <li>list item</li>
          </ul>
        </div><!-- end nav -->
    
        <div id="main">
    
          <h1>Title: Dirty Web Promotion Tricks #1 - Legitimate and
          Malicious Javascripts</h1>
    
          <p>Author: Guest<br />
          Category: Computers &amp; Internet</p>
    
          <div id="ads">
            <script type="text/javascript">
    //<![CDATA[
    <!--
    google_ad_client = "pub-0692291168379994";
    google_ad_width = 0;
    google_ad_height = 0;
    google_ad_format = "336x280_as";
    google_ad_type = "text";
    google_ad_channel ="";
    google_color_border = "CCCCCC";
    google_color_bg = "FFFFFF";
    google_color_link = "3333CC";
    google_color_url = "3333CC";
    google_color_text = "333333";
    //-->
    //]]>
    
    </script> <script type="text/javascript"
         src=
         "http://www.ffshrine.org/ender/layoutbugg/view.php_files/show_ads.js">
    </script><object id="google_ads_frame"
                 type="text/html"
                 data=             "http://www.ffshrine.org/ender/layoutbugg/view.php_files/ads.htm">
              </object>
          </div><!-- end ads -->
    
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Donec fringilla consequat lectus. Maecenas ut sem. Vestibulum
          semper elementum pede. Mauris nisi.</p>
    
          <p>Suspendisse diam. Mauris nec ante quis orci tincidunt rhoncus.
          Nulla tortor ligula, tristique vitae, venenatis vel, hendrerit
          id, mauris. Praesent imperdiet sapien vitae velit. Maecenas non
          diam et velit. Lorem ipsum dolor sit amet, consectetuer
          adipiscing elit. Donec fringilla consequat lectus. Maecenas ut
          sem. Vestibulum semper elementum pede. Mauris nisi. Suspendisse
          diam. Mauris nec ante quis orci tincidunt rhoncus. Nulla tortor
          ligula, tristique vitae, venenatis vel, hendrerit id, mauris.
          Praesent imperdiet sapien vitae velit. Maecenas non diam et
          velit.</p>
        </div><!-- end main -->
      </div><!-- end wrapper -->
    </body>
    </html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Apr 9, 2006 IP
    disgust likes this.
  8. disgust

    disgust Guest

    Messages:
    2,417
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I really appreciate everyone trying to help me.

    I'm not sure if I'm really ready to switch over to a more CSS/xhtml style, really, although I do appreciate that.

    I realized that when I was saving my page changes were being made, unfortunately. here's an "exact" version of what I'm working with: http://www.ffshrine.org/ender/layoutbugg/

    there's no iframe there. I think I could probably fix things with an iframe, but I'd like to avoid using one if possible, as google suggests against it. what there, as opposed to in the other pages, is causing it to display the way it is?

    it was obvious the iframe had a bizarre width in the other one, but what's causing it here?

    again, really appreciate the help
     
    disgust, Apr 10, 2006 IP
  9. disgust

    disgust Guest

    Messages:
    2,417
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    0
    #9
    finally found the problem:

    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "336x280_as";
    Code (markup):
    wonder how the hell that happened.
     
    disgust, Apr 10, 2006 IP