bobleny Posted March 1, 2007 Share Posted March 1, 2007 As the title implies, I set the min-width of an element to 150px and it is way to big. Understood, min-width is the minimum width and not the max-width, which by the way does work... The welcome box, or .text_declar, should only be 150px, but it isn't. I don't understand why. How do I fix this? The welcome box should also be centered, which as you can see, it isn't. How do I fix this too? This is the page: http://www.firemelt.net/crow/ Here is the CSS: body { background-color: #ffffff; width: 100%; height: 100%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #main_body { background-color: #ffffff; width: 80%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding: 0px; } #header { background-color: #009900; width: 100%; height: 80px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 8px; } .text_house { width: 80%; margin-top: 0px; margin-left: 1px; margin-right: 0px; margin-bottom: 5px; float: left; } .text_declar { background-color: #ffffff; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; border-style: solid; border-bottom-style: none; border-width: 2px; border-color: #0000ff; min-width: 150px; max-width: 100%; padding-top: 1px; padding-left: 5px; padding-right: 5px; padding-bottom: 1px; text-align: center; } .text_box { background-color: #ffffff; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 10px; border-style: solid; border-width: 2px; border-color: #0000ff; width: 100%; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 5px; } #related_links { background-color: #996600; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 5px; border-style: solid; border-color: #000000; border-width: 1px; min-width: 17%; padding-top: 3px; padding-left: 2px; padding-right: 2px; padding-bottom: 3px; float: right; list-style-type: none; } p { color: #000000; text-indent: 20pt; line-height: 15pt; word-spacing: 2pt; font-family: courier; } p.left { color: #000000; text-indent: 0pt; line-height: 15pt; word-spacing: 2pt; font-family: courier; } .text_lable { color: #000000; line-height: 15pt; word-spacing: 2pt; font-family: courier; } And here is the HTML: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="css.css" rel="stylesheet" type="text/css" /> <title>Welcome!</title> </head> <body> <div id="main_body"> <div id="header"></div> <div class="text_house"> <div class="text_declar">Welcome!</div> <div class="text_box"> <p>Hello, it is I, Mr. Frustrated.</p> </div> </div> <div id="related_links"> <span class="text_lable">Related Links</span> <br /> <a href="#">Link 1</a> <br /> <a href="#">Link 2</a> </div> </div> </body> </html> So how I fix this, I got no clue what is wrong. Thanks! This CSS drives me crazy, it never works the way I expect it too... Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted March 1, 2007 Share Posted March 1, 2007 you have padding on the div - this gets added to the width of the box. width does not mean width of a container it means the width of the content of that container - while the box model is well established this is one where I think MS used to more intuitive method (the wrong one that is). Quote Link to comment Share on other sites More sharing options...
bobleny Posted March 1, 2007 Author Share Posted March 1, 2007 So your saying, since my padding for .text_declar is 5px right and 5px left, 10px is added to my minimum width, making the minimum width 160px instead of 150? Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted March 1, 2007 Share Posted March 1, 2007 yep Quote Link to comment Share on other sites More sharing options...
bobleny Posted March 1, 2007 Author Share Posted March 1, 2007 OK, great, now why is .text_declar so big? It should only be 160px wide... How do I fix this? Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted March 2, 2007 Share Posted March 2, 2007 when I reduce the width of the page .text_declar it does reduce in size to 150 (or 160 which ever way u swing!) it is so big at normal resolution because you have max-width @ 100% so it will be as wide as it can be... Quote Link to comment Share on other sites More sharing options...
bobleny Posted March 2, 2007 Author Share Posted March 2, 2007 Wha, look what happens when I remove max-width: http://www.firemelt.net/crow/ use the side links to switch css' it will tell you the css for .text_declar Notice that the only way it looks right, is if "width:" is defined... So, please tell me what is wrong, I don't understand... Educate me please! Thanks! Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted March 2, 2007 Share Posted March 2, 2007 it depends on what you think means 'looks right'. There is nothing technically wrong with that layout except maybe the slight overlap when the window is reduced in width. Unless you can proved a graphic of what you want this page to do then 'looks right' could mean everything spelled wrong for all I know... Quote Link to comment Share on other sites More sharing options...
bobleny Posted March 2, 2007 Author Share Posted March 2, 2007 Well, it should look like this: ________ | text | |---------| |---------------------------------| | links | | | | | | | |______| |______________________| The container for text, .text_declar, should be at a minimum of 150px, but not stretch beyond the size of the parent element, .text_house. When I add the values though, it looks like this! _____________________ | text | |---------| |---------------------------------| | links | | | | | | | |______| |______________________| At a minimum, it should look like this: ________ | text | |---------| |---------------------------------| | links | | | | | | | |______| |______________________| At a maximum, it should look like this: _______________________ | text | |---------| |---------------------------------| | links | | | | | | | |______| |______________________| I don't want it to start rapping around like this: _______________________ | text | |---------| | moretext | | links | |---------------------------------| | | | | |______| | | |______________________| Or like this: _______________________ | text | |---------| moretext | links | |---------------------------------| | | | | |______| | | |______________________| Edit: I've uploaded a new html page to the site. You will notice that the declare box is doing exactly what I don't want it to do. http://www.firemelt.net/crow/ Quote Link to comment Share on other sites More sharing options...
bobleny Posted March 2, 2007 Author Share Posted March 2, 2007 I have just uploaded a width_100 to the site so you can see what happens when I set the width to 100%. http://www.firemelt.net/crow/index.php?css=width_100 As you might guess it stretched 100% of its parent element, unlike min_width and max_width.... Do you know what is wrong? After the mods, here are the css, I'm just leaving them at the site so the post isn't 10 miles long: CSS Normal: http://www.firemelt.net/crow/css.css CSS no_max_width: http://www.firemelt.net/crow/no_max-width.css CSS no_min_width: http://www.firemelt.net/crow/no_min-width.css CSS width_100: http://www.firemelt.net/crow/width_100.css CSS no_width: http://www.firemelt.net/crow/no_width.css And the HTML file: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php if ($_GET['css'] == "no_max-width") { $css = "no_max-width"; } elseif ($_GET['css'] == "no_min-width") { $css = "no_min-width"; } elseif ($_GET['css'] == "no_width") { $css = "no_width"; } elseif ($_GET['css'] == "width_100") { $css = "width_100"; } else { $css = "css"; } ?> <link href="<?php echo "$css"; ?>.css" rel="stylesheet" type="text/css" /> <title>Welcome!</title> </head> <body> <div id="main_body"> <div id="header"></div> <div class="text_house"> <div class="text_declar">Welcome! This is a very long sentice designed toe break this box. Actually, it will be two complete sentances and one incomplete sentences but then again, "Welcome!" isn't really a sentance and therefor it isn't really an incomplete sentence, making this title two complete sentences, and a word.</div> <div class="text_box"> <p>Hello, it is I, Mr. Frustrated. Have you had a good day today? I know I havn't. Today I got to work on some CSS. I don't know what CSS' probelm is, but he is always giving me problems! If it isn't one thing it is another... I finaly got boxes right, with help of course. But now a box looks funny and doesn't work right! So, yeah, I'm rather frustrated!</p> <p>Hello, it is I, Mr. Frustrated. Have you had a good day today? I know I havn't. Today I got to work on some CSS. I don't know what CSS' probelm is, but he is always giving me problems! If it isn't one thing it is another... I finaly got boxes right, with help of course. But now a box looks funny and doesn't work right! So, yeah, I'm rather frustrated!</p> </div> <div class="text_declar">This pages CSS!</div> <div class="text_box"> <?php if ($_GET['css'] == "no_max-width") { echo ".text_declar\r\n<br />\r\n"; echo "{\r\n<br />\r\n"; echo "background-color: #ffffff;\r\n<br />\r\n"; echo "margin-top: 0px;\r\n<br />\r\n"; echo "margin-left: auto;\r\n<br />\r\n"; echo "margin-right: auto;\r\n<br />\r\n"; echo "margin-bottom: 0px;\r\n<br />\r\n"; echo "border-style: solid;\r\n<br />\r\n"; echo "border-bottom-style: none;\r\n<br />\r\n"; echo "border-width: 2px;\r\n<br />\r\n"; echo "border-color: #0000ff;\r\n<br />\r\n"; echo "min-width: 150px;\r\n<br />\r\n"; echo "padding-top: 1px;\r\n<br />\r\n"; echo "padding-left: 5px;\r\n<br />\r\n"; echo "padding-right: 5px;\r\n<br />\r\n"; echo "padding-bottom: 1px;\r\n<br />\r\n"; echo "text-align: center;\r\n<br />\r\n"; echo "}\r\n<br />\r\n"; } elseif ($_GET['css'] == "no_min-width") { echo ".text_declar\r\n<br />\r\n"; echo "{\r\n<br />\r\n"; echo "background-color: #ffffff;\r\n<br />\r\n"; echo "margin-top: 0px;\r\n<br />\r\n"; echo "margin-left: auto;\r\n<br />\r\n"; echo "margin-right: auto;\r\n<br />\r\n"; echo "margin-bottom: 0px;\r\n<br />\r\n"; echo "border-style: solid;\r\n<br />\r\n"; echo "border-bottom-style: none;\r\n<br />\r\n"; echo "border-width: 2px;\r\n<br />\r\n"; echo "border-color: #0000ff;\r\n<br />\r\n"; echo "max-width: 100%;\r\n<br />\r\n"; echo "padding-top: 1px;\r\n<br />\r\n"; echo "padding-left: 5px;\r\n<br />\r\n"; echo "padding-right: 5px;\r\n<br />\r\n"; echo "padding-bottom: 1px;\r\n<br />\r\n"; echo "text-align: center;\r\n<br />\r\n"; echo "}\r\n<br />\r\n"; }elseif ($_GET['css'] == "width_100") { echo ".text_declar\r\n<br />\r\n"; echo "{\r\n<br />\r\n"; echo "background-color: #ffffff;\r\n<br />\r\n"; echo "margin-top: 0px;\r\n<br />\r\n"; echo "margin-left: auto;\r\n<br />\r\n"; echo "margin-right: auto;\r\n<br />\r\n"; echo "margin-bottom: 0px;\r\n<br />\r\n"; echo "border-style: solid;\r\n<br />\r\n"; echo "border-bottom-style: none;\r\n<br />\r\n"; echo "border-width: 2px;\r\n<br />\r\n"; echo "border-color: #0000ff;\r\n<br />\r\n"; echo "width: 100%;\r\n<br />\r\n"; echo "padding-top: 1px;\r\n<br />\r\n"; echo "padding-left: 5px;\r\n<br />\r\n"; echo "padding-right: 5px;\r\n<br />\r\n"; echo "padding-bottom: 1px;\r\n<br />\r\n"; echo "text-align: center;\r\n<br />\r\n"; echo "}\r\n<br />\r\n"; } elseif ($_GET['css'] == "no_width") { echo ".text_declar\r\n<br />\r\n"; echo "{\r\n<br />\r\n"; echo "background-color: #ffffff;\r\n<br />\r\n"; echo "margin-top: 0px;\r\n<br />\r\n"; echo "margin-left: auto;\r\n<br />\r\n"; echo "margin-right: auto;\r\n<br />\r\n"; echo "margin-bottom: 0px;\r\n<br />\r\n"; echo "border-style: solid;\r\n<br />\r\n"; echo "border-bottom-style: none;\r\n<br />\r\n"; echo "border-width: 2px;\r\n<br />\r\n"; echo "border-color: #0000ff;\r\n<br />\r\n"; echo "padding-top: 1px;\r\n<br />\r\n"; echo "padding-left: 5px;\r\n<br />\r\n"; echo "padding-right: 5px;\r\n<br />\r\n"; echo "padding-bottom: 1px;\r\n<br />\r\n"; echo "text-align: center;\r\n<br />\r\n"; echo "}\r\n<br />\r\n"; } else { echo ".text_declar\r\n<br />\r\n"; echo "{\r\n<br />\r\n"; echo "background-color: #ffffff;\r\n<br />\r\n"; echo "margin-top: 0px;\r\n<br />\r\n"; echo "margin-left: auto;\r\n<br />\r\n"; echo "margin-right: auto;\r\n<br />\r\n"; echo "margin-bottom: 0px;\r\n<br />\r\n"; echo "border-style: solid;\r\n<br />\r\n"; echo "border-bottom-style: none;\r\n<br />\r\n"; echo "border-width: 2px;\r\n<br />\r\n"; echo "border-color: #0000ff;\r\n<br />\r\n"; echo "width: 150px;\r\n<br />\r\n"; echo "padding-top: 1px;\r\n<br />\r\n"; echo "padding-left: 5px;\r\n<br />\r\n"; echo "padding-right: 5px;\r\n<br />\r\n"; echo "padding-bottom: 1px;\r\n<br />\r\n"; echo "text-align: center;\r\n<br />\r\n"; echo "}\r\n<br />\r\n"; } ?> </div> </div> <div id="related_links"> <span class="text_lable">Related Links</span> <br /> <a href="index.php">Normal</a> <br /> <a href="index.php?css=no_max-width">no_max-width</a> <br /> <a href="index.php?css=no_min-width">no_min-width</a> <br /> <a href="index.php?css=width_100">width_100</a> <br /> <a href="index.php?css=no_width">no_width</a> </div> </div> </body> </html> I hope this will help. I keep playing around with it trying to get it to work, no luck though.... Quote Link to comment Share on other sites More sharing options...
bobleny Posted March 5, 2007 Author Share Posted March 5, 2007 Ok, thanks toondude... I'm just going to use a solid width... :'( Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.