Jump to content

Width:100% Vs Auto, Why Is Auto Resizing As Bigger Than 100%


nachumk
 Share

Recommended Posts

I have a div, followed by a table, followed by rows with 7 columns with an input box in each column. What I am wondering is why must I set the input box as width:100%? When I remove that style the table overflows the div, when I have that style then it stays in the div. I think I'm lacking some understanding here b/c how could the input box take more than 100%?Note that if menu2Item's declaration of width is commented than the table overflows the div, otherwise it stays inside.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css">.menu2 { float:left;width:80%; } /* div element */.menu2Table { table-layout:fixed;width:100% } /* table element */.menu2Item { width:100%; } /* input element, if this element is commented than the table takes up more than 80% of the screen */</style></head><body><div class="menu2"><table class="menu2Table"><tr><td class="menu2Td">First row</td><td class="menu2Td">Second row</td><td class="menu2Td">Third row</td><td class="menu2Td">Fourth row</td><td class="menu2Td">Fifth row</td><td class="menu2Td">Sixth row</td><td class="menu2Td">Seventh row</td></tr><tr><td class="menu2Td"><input class="menu2Item" type="text"></input></td><td class="menu2Td"><input class="menu2Item" type="text"></input></td><td class="menu2Td"><input class="menu2Item" type="text"></input></td><td class="menu2Td"><input class="menu2Item" type="text"></input></td><td class="menu2Td"><input class="menu2Item" type="text"></input></td><td class="menu2Td"><input class="menu2Item" type="text"></input></td><td class="menu2Td"><input class="menu2Item" type="text"></input></td></tr></table></div>stop</body></html>I have been reading the W3C standard and it's a bit confusing...Thanx for any help in understanding how this auto layout algorithm works.

Link to comment
Share on other sites

weird, i tried this exact code in FF3 & IE7/8 and I saw no change with that code in or commented out. :)
Strange, because I just tried it too, FF 3.5.3, and IE8 and Chrome. Exactly as I stated. Without the comment you'll see that the last input box ends right before the word "stop" above. With the comment the last input box overflows and partially goes past the word "stop". The stop is a simple way to see where 80% is, as it is floated right after the div.
Link to comment
Share on other sites

100% refers to the 100% of the width of the first ancestor that has a defined width.The <input> element begins with a default width (Somewhere around 150 pixels, at least that's what I see in my pages), if the container it is in is less wide than that, it may exceed the width of the container.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...