nachumk Posted October 28, 2009 Share Posted October 28, 2009 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 More sharing options...
thescientist Posted October 28, 2009 Share Posted October 28, 2009 weird, i tried this exact code in FF3 & IE7/8 and I saw no change with that code in or commented out. Link to comment Share on other sites More sharing options...
nachumk Posted October 28, 2009 Author Share Posted October 28, 2009 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 More sharing options...
nachumk Posted October 29, 2009 Author Share Posted October 29, 2009 Anyone have any more input on this topic? I feel a desperation to understand what is going on here. Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2009 Share Posted October 29, 2009 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.