Jack Tripper Posted May 29, 2006 Share Posted May 29, 2006 You can copy and paste the following, and see what's wrong. The width of an element is determined by content, excluding the external margin, the border and the internal padding.Problem is, i want what i want, and i want it the way i want it. What is the CSS way to do what i want? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD> <TITLE> W3C Box Model </TITLE> <STYLE type="text/css"> DIV.boxTitle { width: 100%; background-color: lime; border: 1px solid green; padding-left: 1em; /*Internal indent title from left...*/ padding-right: 1em; /*...and right*/ font-weight: bold; } DIV.boxBody { width: 100%; height: 100%; border-left: 1px solid green; border-right: 1px solid green; border-bottom: 1px solid green; } </STYLE></HEAD><BODY> <DIV style="width: 512px; border: 1px solid black; text-align: center; margin-bottom: 5px">This box is 512px wide</DIV> <!--i want any content in the following div to be constrained to a box 512px wide--> <DIV style="width: 512px; border: 1px dotted red"> <DIV class="boxTitle">Title Goes Here</DIV> <DIV class="boxBody">Content goes here.</DIV> </DIV> <BR> <DIV style="width: 387px; border: 1px solid black; text-align: center; margin-bottom: 5px">This box is 387px wide</DIV> <!--i want any content in the following DIV to be constrained to a box 387px wide--> <DIV style="width: 387px; border: 1px dotted red"> <DIV class="boxTitle">Title Goes Here</DIV> <DIV class="boxBody">Content goes here.</DIV> </DIV></BODY></HTML> i obviously don't want boxTitle and boxBody to be hardcoded to any widths. i am sure there is a standard workaround of adding 3 or 4 more DIVs in order to separate a containing block with its contents; i just can't think of the "CSS" way to do it. Link to comment Share on other sites More sharing options...
boen_robot Posted May 29, 2006 Share Posted May 29, 2006 Problem is, i want what i want, and i want it the way i want it. What is the CSS way to do what i want? I haven't had so much laugh scince justsomeguy said "OK. Make haste."... ahahahaha :)I'm not sure I understand what you want exactly though and I don't indend on carrying and trying your code. If I have understood correctly, you want to fix IE6s buggy box model to follow the W3C box model, correct? Then I suggest to simply use the start hack:padding: 20px;; /* Value for all browsers */*padding: 21px; /* Value for IE6 and lower. It's equal to the padding + the border itself. */border: 1px solid #000000; Link to comment Share on other sites More sharing options...
Jack Tripper Posted May 29, 2006 Author Share Posted May 29, 2006 If I have understood correctly, you want to fix IE6s buggy box model to follow the W3C box model, correct?i don't think so. The width of an element refers to the width of the content.Overall width = width of content (e.g. text) +width of padding on left +width of padding on right +width of border on left +width of border on right +width of margin on left +width of margin on rightMy problem is, i have a containing block (e.g. DIV) that is a given size. i want any content in that DIV to full take up that width. Problem is, if i try to specify a width of 100%, then that refers to the internal content. The browser then adds any margins, borders, and padding; and the final width is larger than the containing DIV.What collection of DIVs can be used so that my content fills it's containing block?I don't indend on trying your codeIf i could have posted a screenshot, i would have. But i figured it would be easier for a reader to take the 20 seconds to see it for themselves. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now