mboehler3 Posted December 14, 2010 Share Posted December 14, 2010 I am using CSS from the 960 grid system found here.Basically I am trying to put a solid, 1px gray border around the stage here. Below is the code I am using. For some reason, when I add the grid_3 and grid_9 classes to my code, the border breaks and is smushed at the top of the page. I can adjust the height of the border to 500px, for example, and the border will expand. But, every page won't have the same set height, so I don't want to give it a number. I tried height:auto, but that didn't work. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title><style type="text/css">body {margin:0;padding:0}.container_12{margin-left:auto;margin-right:auto;width:960px;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3{width:220px}.container_12 .grid_6{width:460px}.container_12 .grid_9{width:700px}.container_12 .grid_12{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px;}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px;}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}</style></head><body><div style="border:1px solid #cccccc;margin-left:auto;margin-right:auto;width:960px;height:auto"><div class="container_12"><div class="grid_3">Left side here</div><div class="grid_9">Right side here</div></div></div></body></html> Here is a screenshot I took of how the page is supposed to look, but only when I set the height to 500px: And here's how it looks now, when I set the height to auto: Anyone know how to get the first picture look without setting the height to a number? Thanks in advance. Link to comment Share on other sites More sharing options...
thescientist Posted December 14, 2010 Share Posted December 14, 2010 to the div being given the border, try adding overflow: auto if you aren't going to give the div a defined height. Link to comment Share on other sites More sharing options...
mboehler3 Posted December 14, 2010 Author Share Posted December 14, 2010 to the div being given the border, try adding overflow: auto if you aren't going to give the div a defined height.You're so smart... that worked. Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.