Solved

HTML Inner element extending beyond outer element

Posted on 2007-11-15
3
573 Views
Last Modified: 2013-11-19
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
Comment
Question by:cfans
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 5

Accepted Solution

by:
rucky544 earned 250 total points
ID: 20289027
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
 
LVL 16

Assisted Solution

by:rbudj
rbudj earned 250 total points
ID: 20289082
You should reverse your margins and padding.  Add them to the Parent instead of the Child.
0
 
LVL 16

Expert Comment

by:rbudj
ID: 20289105
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question