Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 580
  • Last Modified:

HTML Inner element extending beyond outer element

I'm having a problem where when I set a parent element to 100% and then the child element to 100% with a margin or padding, the child element will extend beyond the parent element.

I've narrowed it down that this only occurs with a certain doctype being:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


However it works with the following doctypes:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


If you copy the attached code snippet and add the doctypes you'll see what I'm talking about..
<table style="width:100%; border: 1px solid black">
  <tr>						
    <td> 
      <div style="width: 100%; border: red 1px solid; margin:10px;">testing the width of a portlet.
      </div>
    </td>
  </tr>		
</table>

Open in new window

0
cfans
Asked:
cfans
  • 2
2 Solutions
 
rucky544Commented:
Why are you putting a div set to 100% in a <td> anyway?

Divs are automatically block elements, so just set the width to auto.
0
 
rbudjCommented:
You should reverse your margins and padding.  Add them to the Parent instead of the Child.
0
 
rbudjCommented:
BTW, the difference you are seeing in the doctypes is because one is STRICT and the other is TRANSITIONAL.  Strict meaning there is no leeway for the browser to identify your mistake and adjust itself accordingly.  Transitional will allow the browser to adjust itself to overcome the mistake.  Again, make the Parent with the margins or padding.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now