SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Londinium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    declaring a DTD messes up my HTML/CSS!?!

    Hi,

    I have come across this issue:

    I have a layout like this:

    <div id="mastercontainerdiv" style="position: absolute; left: 105px; top: 120px; width: 660px">
    <div id="containerdiv1" style="float: left; width: 70%;">
    some more <div>'s with content here
    </div>
    <div id="containerdiv2" style="float: right; top; width: 30%; padding-left: 10px">
    some more <div>'s with content here
    </div>
    </div>

    Now, whats happening is that the second container DIV (the one that's floated right) displays its contents below and to the right of the first container DIV (that's floated left) if a DTD is set e.g. like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    If NO DTD is set, then the page displays fine, with both container DIV's side by side.

    What am I doing wrong or what am I missing? Is it important to set a DTD?

    I test on IE6 and Opera 7.1

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    When you add the DTD, your document goes into "Strict mode" (even if you specify a transitional DOCTYPE like you did). This means that padding, borders, and margins are ADDED to the width you specify, making your right side div 30%+10px wide. This is why it moves to the next line, as 70% (width of left div) + 30% + 10px (width of the right div) is more than 100%.

    To remedy this, convert your width measurements to pixels (since the outer <div>'s width is set in pixels anyway). Make sure your width + padding + border + margin is less than or exactly equal to the width of the outer <div>

  3. #3
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Londinium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks very much! I never knew that!

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rakaposhi
    thanks very much! I never knew that!
    Then you should also know that IE5 still gets it wrong with a doctype. If you set a width on a div, best not to set padding or borders at the same time, or start messing around with this http://www.tantek.com/CSS/Examples/boxmodelhack.html

    Douglas
    Hello World


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
  •