<div> переносится на другую строку

верстаю страничку (двухколонную!!!) при помощи дивов, резиновую, первая колонка - меню (она же sidebar) - 40%, вторая - основное тело (mainbody) - 59%

в любом случае (сколько бы процентов, какой бы float) ни устанавливал, основное тело смещается на следующую строку

CSS:

Код (CODE):

1. #wrap {
2. width: 100%;
3. }
4.  
5. #footer {
6. clear: left;
7. }
8.  
9.  
10. #sidebar {
11. float:none;
12. width:40%;
13. }
14.  
15. #content {
16. float: right;
17. display: inline;
18.  
19. width: 59%;
20.  
21. padding-right: 7px;
22. padding-bottom: 2px;
23. padding-left: 7px;
24. padding-top: 2px;
25.  
26. background-color: #CCCCCC;
27.  
28. border-left-color: #696969;
29. border-left-style: solid;
30. border-left-width: 1px;
31.  
32.  
33. border-right-color: #282828;
34. border-right-style: solid;
35. border-right-width: 1 px;
36.  
37.  
38. border-top-color: #959595;
39. border-top-style: solid;
40. border-top-width: 1px;
41.  
42.  
43. border-bottom-color: #1d1d1d;
44. border-bottom-style: solid;
45. border-bottom-width: 1px;
46. }

index.php:

Код (CODE):

1. <div id="wrap">
2.  <div id="sidebar">
3.    <div class="inside">
4.      <?php mosLoadModules('left_menu');?>
5.    </div>
6.  </div>
7.  <div id="content">
8.    <div class="inside">
9.      <?php mosMainBody(); ?>
10.    </div>
11.  </div>
12.  <div id="footer">
13.    <div class="inside">
14.      <?php include_once( $mosConfig_absolute_path .'/includes/footer.php');?>
15.    </div>
16.  </div>
17. </div><!--end of wrap-->

как же сделать так, чтобы оно вставало туда, куда нужно? мозг сломал - не придумал (

скрин:

 

Ответ: <div> переносится на другую строку

Код (CODE):

1. #menu {
2. float: left;
3. width: 15%;
4. border: 1px solid #cccccc;
5. }
6. #adv {
7. float: left;
8. width: 15%;
9. border: 1px solid #cccccc;
10. clear: left;
11. }
12. #content {
13. float: right;
14. width: 84%;
15. border: 1px solid #cccccc;
16. }
17.  
18. <div id="menu">
19. ver 1.5.5 (09/06/2007)<br />
20. ver 1.5.5 (09/06/2007)<br />
21. ver 1.5.5 (09/06/2007)<br />
22. ver 1.5.5 (09/06/2007)
23. </div>
24. <div id="content">
25. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
26. </div>
27. <div id="adv">
28. ver 1.5.5 (09/06/2007)<br />
29. ver 1.5.5 (09/06/2007)<br />
30. ver 1.5.5 (09/06/2007)<br />
31. ver 1.5.5 (09/06/2007)
32. </div>

а если такую структуру ?

 

Ответ: <div> переносится на другую строку

libero, все несколько проще, а решений много вот два из них
1. ..касательно того что имеем у вас:
a) Ваш #content имеет в своих стилях padding и border тем самым он уже не просто 59%, а несколько больше для некоторых браузеров.
б) также имеем class="inside", который не описан в таблице стилей, тем самым засоряя код, создавая лишний хаос и очередную проблему для браузеров.
в) главная ошибка в том что #sidebar должен иметь float:left ,а не "none"

Решение проблемы: подчистить и убрать лишнее, также в размере вашего кода наблюдается #wrap не несущий в данной ситуации никакой смысловой и программной нагрузки. рекомендация дополнительная по отношению к footer (рекомендую поставить clear: both)

Итого имеем чистое и рабочее

Код (CODE):

1. <style type="text/css">
2. <!--
3.  
4. #footer {
5.     clear: both;
6.     background:#0099CC;
7. }
8. #sidebar {
9.     background:#CCFFCC;
10.     float:left;
11.     width:40%;
12. }
13. #content {
14.     float: right;
15.     width: 59%;
16.     border: 1px solid;
17.     background-color: #CCCCCC;
18.     border-left-color: #CC0000;
19.     border-right-color: #FF9900;
20.     border-top-color: #009900;
21.     border-bottom-color: #003399;
22. }
23.  
24. -->
25. </style>
26. </head>
27. <body>
28.  
29.   <div id="sidebar">
30.       <p>menu</p>
31.   </div>
32.  
33.   <div id="content">
34.       <p>12345</p>
35.   </div>
36.  
37.   <div id="footer">
38.       <p>footer</p>
39.   </div>
40.    
41. <!--end of wrap-->
42. </body>

2. Несмотря на все подчистки и зачистки стилей - работу с двумя колонками рекомендую производить внутри таблицы (вставляете дивы внутрь ячейки и истязайте их сколько душе угодно. Причин тому очень много, особенно если вы настроены на "резинку".

 

Ответ: <div> переносится на другую строку

благодарю за ответы, они мне очень помогли

использовал двухячеечную таблицу с дивами, все на ура

2Viper, не совсем понял эту структуру =P и как следствие не смог попробовать (

 

Ответ: <div> переносится на другую строку

переносилось, потому что нехватало места. Надо было пару процентов убавить у левого или правого дива.
CSS слишком громоздкий, при таком раскладе, чтобы прописать все классы для всего сайта, получится в 2-3 раза больше кода, чем можно сделать:

Код (CODE):

1. html {
2.     height: 100%;
3.     margin-bottom: 1px;
4. }
5. body {
6.     margin: 0;
7.     padding: 0;
8.     height: 100%;
9. }
10. #wrap {
11.     width: auto;
12.     margin: 0 auto;
13.     padding: 0;
14.    
15. }
16.  
17. #footer {
18.     clear: both;
19.     height: auto;
20.     padding: 2px 7px;
21. }
22.  
23. #sidebar {
24.     float:left;
25.     width:36%;
26.     height: auto;
27.     padding: 2px 7px;
28. }
29.  
30. #content {
31.     float: right;
32.     display: block;
33.     width: 60%;
34.     height: auto;
35.     padding: 2px 7px;
36.     background-color: #CCCCCC;
37.     border-left: solid 1px #696969;
38.     border-right: solid 1px #282828;
39.     border-top: solid 1px #959595;
40.     border-bottom: solid 1px #1d1d1d;
41. }

Вот тебе дивы, без таблиц:

Код (PHP):

1. <body>
2. <div id=wrap>
3.     <div id=sidebar>
4.     <?php if (mosCountModules('left_menu')) : ?>
5.         <div class="inside">
6.             <?php mosLoadModules('left_menu');?>
7.         </div>
8.     <?php endif; ?>
9.    </div>
10.   <div id=content>
11.   <div class="inside">
12.      <?php mosMainBody(); ?>
13.    </div>
14.   </div>
15. </div>
16.  <div id=footer>
17.  <div class="inside">
18.      <?php include_once('includes/footer.php'); ?>
19.    </div>
20.  </div>
21. </body>

 

Ответ: <div> переносится на другую строку

что непонятного пример:

1111 2222
3333
где 1111 - меню, 2222 - контент, 3333 - меню, модуль, что угодно.


в бонус - http://www.csszengarden.com/?cssfile=205/205.css как пример
а ещё лучше - http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

 

Ответ: <div> переносится на другую строку

ух ты, благодарствую обоим! мегаполезно

 

Ответ: <div> переносится на другую строку

также рекомендую почитывать
Adobe CSS Advisor

чтобы исправлять ошибки в разметке