June 12, 201115 yr hello Proper confused. I have uploaded a demo page of varying column widths but for some reason is not displaying at all how it should do when I see it in Dreamweaver and vice-versa. Am I doing something wrong? My link <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My Practice HTML Page</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link href="http://fonts.googleapis.com/css?family=Shanti:regular" rel="stylesheet" type="text/css" > <link href="http://fonts.googleapis.com/css?family=Carter+One:regular" rel="stylesheet" type="text/css" > <style> body { font-family: 'Shanti', serif; font-size: 9pt; font-style: normal; font-weight: 400; line-height: 13pt; margin: 0px; padding: 0px; margin-left: 50px; margin-top: 50px; } h1 { font-family: 'Carter One', serif; font-size: 16pt; font-style: normal; font-weight: 400; } * { margin: 0px; padding: 0px; } body { font: 10px Arial, Helvetica, sans-serif; background: #CCCCCC; } #main_container { width: 90%; border: 1px solid #000000; margin-top: auto; margin-right: auto; margin-bottom: 10px; margin-left: auto; } .basic_row { position: relative; width: 90%; margin: auto; padding: 5px; } .20_col { float: left; width: 20%; padding: 10px; background-color: #CC9; } .30_col { float: left; width: 30%; padding: 10px; background-color: #C60; } .40_col { float: left; width: 40%; padding: 10px; background-color: #600; } .50_col { float: left; width: 50%; padding: 10px; background-color: #06C; } .60_col { float: left; width: 60%; padding: 10px; background-color: #09F; } .70_col { float: left; width: 70%; padding: 10px; background-color: #C06; } .80_col { float: left; width: 80%; padding: 10px; background-color: #609; } .90_col { float: left; width: 90%; padding: 10px; } .100_col { float: left; width: 100%; padding: 10px; background-color: #999; } </style> </head> <body> <div id="main_container"> <div class="basic_row"> <div class="20_col">Content for class "20_col" Goes Here</div> <div class="80_col">Content for class "80_col" Goes Here</div> <div class="clear_float"></div> </div> </div> <div id="main_container"> <div class="basic_row"> <div class="50_col">Content for class "50_col" Goes Here</div> <div class="50_col">Content for class "50_col" Goes Here</div> <div class="clear_float"></div> </div> </div> <div id="main_container"> <div class="basic_row"> <div class="60_col">Content for class "60_col" Goes Here</div> <div class="40_col">Content for class "40_col" Goes Here</div> <div class="clear_float"></div> </div> </div> <div id="main_container"> <div class="basic_row"> <div class="70_col">Content for class "70_col" Goes Here</div> <div class="30_col">Content for class "30_col" Goes Here</div> <div class="clear_float"></div> </div> </div> <div id="main_container"> <div class="basic_row"> <div class="100_col">Content for class "two_col" Goes Here</div> <div class="clear_float"></div> </div> </div> </body> </html> Any ideas? The idea behind it is to create rows with columns of varying widths
June 12, 201115 yr You might find that assigning more than one DIV the same ID (in this case #main_container) means that only one of the DIVs actually have the style defined for that ID in the stylesheet applied. Try changing it to a class. Change #main_container to .main_container and then for the classes style do: .main_container { border: 1px solid #000000; float: left; margin: auto auto 10px 10px; } Then remove the line 'width: 20%' from .twenty_col. EDIT: Is that what you wanted, or? Edited June 12, 201115 yr by Moose
June 12, 201115 yr Author Hum that didn't seem to do anything. Wanted to have 20 next to 80, 50 next to 50 etc etc. It doesn't seem to show as rows only one box below another...
June 12, 201115 yr Works fine when you take off the padding. It's adding to the box model and forcing the wrapping. Try setting like width 54% with 3% padding for the 60% box, 34% with 3% padding, etc. You might have to play around with the values to get it working cross-browser. You should also add a generic class with: .generic { float: left; padding: 3%; } Apply generic to all the cols, then you are only changing the width and BG color for each unique type. Edited June 12, 201115 yr by porkchops
June 12, 201115 yr One problem is that you have an incomplete doctype, add the w3.org url from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html The main problem is that you have divs with width: 20% and another with width: 80% but the divs also have padding in px which makes the total exceed 100%. Try making the padding (and margin and borders if you have them) in % and reduce the 20% and 80% so that the total equals 100%. Ha! porkchops beat me by 2 mins! Edited June 12, 201115 yr by Wickham
June 12, 201115 yr Author That seems to have worked but how can I stop boxes from dropping off under another? I wanted flexibility (I may want 80 to appear on the left on one row but on the right in another). Porkchops - Where do I put this?
Create an account or sign in to comment