1 Reply Latest reply on May 31, 2010 1:25 PM by Nancy OShea

    problem with div tags (more infomation given)

    iconofsin14 Level 1

      This question helps elaborate on something i asked about earlier and a new problem

       

      I have put the code in the table bellow to seperate it from the rest of my text so that is is clearer. (this is the first time a table has ever been useful for me lol)

      Bellow the table are picures of what is displayed. (both in live and design views)

       

      i have 2 problems

      1) "third" when displayed in design view stretches all the way over to the left (so its dotted outline encroaches on the space that is correctly occupied by "second") although the content for "thrid" appears in the correct place both in design and live view modes.

       

      2) Thoes boarders are not displayed in live view. they are displayed in design view however. the yellow border for Third appears in the space where it should not (so it is mimicking problem number 1 )

       

       

      The 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=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      #first {
      height: 300px;
      width: 100px;
      float: left;
      border-color:#03C
      }
      #second {
      height: 100px;
      width: 100px;
      float: left;
      border-color:#F00
      }
      #third {
      float: none;
      border-color:#FF0
      }
      #third, #second, #first {
      border: 10px solid;
      </style>
      </head>

      <body>

      <div id="second">Content for  id "second" Goes Here</div>
      <div id="third">Content for  id "third" Goes Here</div>
      <div id="first">Content for  id "first" Goes Here</div>
      </body>
      </html>

       

      The live view

      live view.jpg

      The design view

      design view.jpg