By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

Problem with my CSS/HTML, What is wrong?

P: 7
http://www.shonenshead.com/testing.html

Link provided above for the small little backend im working on for the company I work for. (Nothing to fancy, or requiring a crap load of work, I just don't want marketing to complain too much :) )

Anyway, when you close the browser smaller than a full screen, the entire body text immediately moves left and into the menus screen. Is there anyway that I can prevent this? And if so how? I'll provide the code down here:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type='text/css'>
  4. body{
  5.     margin: 20;
  6.     padding: 10;
  7. }
  8. #container{
  9.     width 800px;
  10.     margin: 0 auto 0 auto;
  11. }
  12. #header{
  13.     height: 10px;
  14.     padding-bottom: 45px;
  15.     background: #FFF url('gradient.gif') repeat-x bottom;
  16. }
  17. #logo{
  18.     position: relative;
  19.     top: 15px;
  20.     left: 17px;
  21. }
  22. #content{
  23.         margin-top: 20px;
  24. }
  25. #left{
  26.     height: 20px;
  27.     width: 169px;
  28.     float: left;
  29. }
  30. #main{
  31.     width: 1000px;
  32.     margin: 30px 10px 0px 10px;
  33.     float: left;
  34. }
  35. .clear{
  36.     clear: both;
  37. }
  38. #content .gradient{
  39.     height: 24px;
  40. }
  41. #inside .red{
  42.     color: red;
  43. }
  44. #left .gradient{
  45.     background: #FFF url('leftgradient.gif') no-repeat;
  46.     padding: 5px 10px 0 20px;
  47. }
  48. ul#menu{
  49.     margin: 5px 0px 5px 0px;
  50.     padding 0px;
  51. }
  52. ul#menu li{
  53.     margin-bottom: 4px;
  54.     list-style-type: none; /* removes bullet points*/
  55. }
  56.  
  57. </style>
  58. </head>
  59. <body>
  60. <div id='container'>
  61. <img id='logo' src='logo.gif' />
  62. <div id='header'></div>
  63.  
  64. <div id='content'></div>
  65. <div id='left'>
  66. <br>
  67. <div class='gradient'><strong><font color='white'>Menu</font></strong></div>
  68. <ul id='menu'>
  69. <li>Home</li>
  70. <li>Search</li>
  71. <li>Browse</li>
  72. <li>Haxor</li>
  73. <li>1337</li>
  74. </ul>
  75. </div>
  76. <div id='main'>
  77. <p align='justify'>
  78. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam orci. Aliquam ultricies condimentum nulla. Pellentesque eu nisi. Suspendisse varius neque vel pede. Aliquam enim felis, bibendum at, laoreet a, vehicula sed, felis. Curabitur leo odio, congue eu, vestibulum non, sollicitudin ac, mi. Integer tempus, massa id aliquet laoreet, lorem purus tristique nisl, sed elementum felis enim eu libero. Phasellus in magna ac nisl hendrerit commodo. In vitae nisl ac sapien ultricies vulputate. Mauris facilisis. Donec laoreet lectus feugiat velit. Maecenas tortor lectus, malesuada quis, ullamcorper non, porta sit amet, urna. Praesent sit amet arcu sit amet turpis hendrerit suscipit. In luctus, magna ac volutpat bibendum, augue ligula tristique augue, non nonummy nisl elit vel augue. Aenean ac turpis congue magna sollicitudin dapibus.
  79. </p>
  80. <p>
  81. Praesent ante arcu, tempus a, suscipit id, tincidunt eu, dui. Sed ante nisi, semper vitae, dictum id, convallis at, urna. Mauris lorem mi, interdum non, euismod eget, aliquam ac, ante. Morbi bibendum imperdiet massa. In ut ipsum. Fusce mattis feugiat odio. In lacus orci, volutpat quis, lobortis porttitor, dictum at, dolor. Donec cursus tortor ut urna. Sed tincidunt felis ac pede. Integer ut tortor id magna pretium interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed porta, nisi eu tempus ultricies, enim urna rhoncus ipsum, vitae posuere justo nulla vel nibh. Nullam arcu ipsum, molestie non, vehicula pellentesque, lacinia in, dui. Nunc placerat tellus a velit. Nullam aliquam lobortis odio.
  82. </p>
  83. <p>
  84. Aenean erat ante, feugiat sed, dictum nec, varius non, purus. Ut tristique, orci et molestie sagittis, neque erat lacinia justo, at mattis neque sem ut sem. Donec a velit a tellus imperdiet dignissim. Cras consectetuer, pede at fermentum scelerisque, quam felis accumsan urna, adipiscing varius nisl diam et justo. Vivamus vehicula, sem et lobortis tempus, nulla tellus luctus felis, sit amet bibendum mauris nibh quis augue. Vestibulum blandit facilisis odio. Phasellus sem neque, lobortis tempor, consequat aliquam, pharetra vel, augue. Nullam mattis felis sed risus. Vestibulum quis nibh vitae arcu ultricies accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi mauris dolor, ullamcorper nec, nonummy at, aliquet quis, massa. Cras ut orci in justo ullamcorper lacinia. Cras adipiscing, massa vel fringilla molestie, nunc justo pellentesque ligula, sed semper turpis velit lacinia justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  85. </p>
  86. <p>
  87. Ut adipiscing gravida nisi. Suspendisse lacus. Pellentesque at turpis. In hac habitasse platea dictumst. Vivamus pharetra. Suspendisse in enim vitae mi pharetra interdum. In id arcu. Nulla nulla turpis, ultrices in, fringilla ut, faucibus ac, sem. Suspendisse vitae enim vel dui semper commodo. Sed auctor accumsan ligula. Fusce eleifend congue lectus. Sed ac mauris. Vestibulum justo dui, fringilla vitae, luctus id, suscipit et, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin varius metus sed nisl. Proin feugiat fringilla arcu. Suspendisse molestie metus. Donec est est, pulvinar id, viverra ac, aliquet quis, massa. Fusce leo.
  88. </p>
  89. <p>
  90. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, massa id tincidunt blandit, nisi turpis condimentum dolor, sed consectetuer neque augue ut justo. Donec turpis velit, iaculis sed, viverra nec, ultricies at, turpis. Suspendisse commodo. Sed sollicitudin vulputate dolor. Curabitur a neque in orci molestie rutrum. Nam id augue. Vivamus tincidunt felis quis pede. Maecenas nonummy consequat orci. Quisque lectus.
  91. </p>
  92.  
  93. </div>
  94. <div class='clear'></div>
  95.  
  96. </div>
  97. </body>
  98. </html>
  99.  
Sorry about the formatting...seemed to have lost it when I paste in....

Anyway, I'm new to CSS and trying something new, so if you can help me I'd greatly appreciate it :)

~shonen
May 1 '07 #1
Share this Question
Share on Google+
3 Replies


kallyone
P: 3
In your main section try setting your width to a percentage. That will allow it to auto adjust as you change the browser window size.
May 1 '07 #2

P: 7
awesome thanks!

Worked! appreciate the fast response :)


~shonen
May 1 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
You don't have a doctype. See the sticky at the top of this board.
May 1 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.