471,603 Members | 1,987 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,603 software developers and data experts.

Floating Problem

150 100+
I'm having problem with this css why i don't know

That is my HTML:
[HTML]<div id="main_container">
<div id="menu">
<div id="menu_Categories">
<img src="../IMGS/LIST_O_00.gif" width="13" height="14" align="top" border="0"/> Smartic Categories
</div>
<div id="Sub_Categories">
<a href="#"><img src="../IMGS/LIST_O_01.gif" width="13" height="13" align="top" border="0"/> Real Estate</a>
<a href="#"><img src="../IMGS/LIST_O_01.gif" width="13" height="13" align="top" border="0"/> Video Games</a>
</div>
</div>
<div id="container_body">Welcome visitors</div>
</div>[/HTML]

That is my CSS:

Expand|Select|Wrap|Line Numbers
  1. #main_container {
  2.     color: #666666;
  3.     padding-top: 50px;
  4.     padding-right: 10px;
  5.     padding-bottom: 10px;
  6.     padding-left: 10px;
  7.     border: 1px solid #CCCCCC;
  8. }
  9. #menu {
  10.     width: 200px;
  11.     float: left;
  12. }
  13. #menu_Categories {
  14.     background-color: #9bcdff;
  15.     color: #FFFFFF;
  16.     padding: 5px;
  17. }
  18. #Sub_Categories {
  19.     border-right-width: 1px;
  20.     border-bottom-width: 1px;
  21.     border-left-width: 1px;
  22.     border-top-style: none;
  23.     border-right-style: solid;
  24.     border-bottom-style: solid;
  25.     border-left-style: solid;
  26.     border-right-color: #CCCCCC;
  27.     border-bottom-color: #CCCCCC;
  28.     border-left-color: #CCCCCC;
  29.     padding: 5px;
  30. }
  31.  
  32. #Sub_Categories a {
  33.     color: #999999;
  34.     font-size: 11px;
  35.     display: block;
  36.     padding: 3px;
  37. }
  38. #Sub_Categories a:hover {
  39.     color: #FF3300;
  40.     background-color: #E2EFFE;
  41.     border: 1px solid #666666;
  42.     padding: 2px;
  43. }
  44. #container_body {
  45.     margin-left: 220px;
  46. }
Sep 15 '07 #1
3 1190
ronverdonk
4,258 Expert 4TB
So you showed the code. What is the problem you encounter?

Ronald
Sep 15 '07 #2
smartic
150 100+
Smartic Categories should be within the border of the page but it dosen't do that it gets out of the border of the page
Sep 15 '07 #3
drhowarddrfine
7,435 Expert 4TB
Elements are not to expand to contain floated elements. But to do what you want, add 'overflow:auto' to #main_container.
Sep 16 '07 #4

Post your reply

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

Similar topics

14 posts views Thread by Amit Bhatia | last post: by
5 posts views Thread by Anton Noll | last post: by
12 posts views Thread by meltedown | last post: by
15 posts views Thread by michael.mcgarry | last post: by
32 posts views Thread by ma740988 | last post: by
39 posts views Thread by rembremading | last post: by
6 posts views Thread by Jeremy | last post: by
1 post views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.