За последние 24 часа нас посетил 17251 программист и 1534 робота. Сейчас ищут 1546 программистов ...

CSS создание 2 колонок с помощью DIV

Тема в разделе "HTML и CSS", создана пользователем Vitas, 11 янв 2007.

  1. Vitas

    Vitas Активный пользователь

    С нами с:
    7 фев 2006
    Сообщения:
    595
    Симпатии:
    0
    Адрес:
    Новосибирск, Академгородок
    Код (Text):
    1. <style>
    2.  
    3. body {
    4.  
    5.     font: 10pt arial;
    6.     color: #6A6A6A;
    7.  
    8. }
    9.  
    10. #main {
    11.  
    12.     width: 750;
    13.     margin-left:  auto;
    14.     margin-right: auto;
    15.  
    16. }
    17.  
    18. #menu {
    19.  
    20.     width: 150px;
    21.     float: left;
    22.  
    23.     color: #FFFFFF;
    24.     background: rgb(191, 0, 0);
    25.     padding: 10px 20px;
    26.  
    27. }
    28.  
    29. #content {
    30.  
    31.     width: 600px;
    32.    
    33.     background: #F9F9F9;
    34.     padding: 10px 20px;
    35.  
    36. }
    37.  
    38. </style>
    39.  
    40.  
    41.  
    42. <div id="main">
    43.  
    44.     <div id="menu">
    45.    
    46.         Текст
    47.    
    48.     </div>
    49.    
    50.     <div id="content">
    51.    
    52.         Текст<br />
    53.         Текст<br />
    54.         Текст<br />
    55.         Текст<br />
    56.         Текст
    57.    
    58.     </div>
    59.  
    60. </div>
    Как сделать чтоб правый блок не "заезжал" под левый. В области "блочной верстки" я нуб. :)

    PS: Мой браузер - FireFox.
     
    #1 Vitas, 11 янв 2007
  2. Anonymous

    Anonymous Guest

    Блин... не поверишь. =)

    // C нетерпением жду вопроса: «А почему именно 190px ???»
     
    #2 Anonymous, 11 янв 2007
  3. Anonymous

    Anonymous Guest

    ЗЫ. Можешь в аську стукнуть, если хочешь. =)
     
    #3 Anonymous, 11 янв 2007
  4. Anonymous

    Anonymous Guest

    ЗЗЫ. В IE открой. =)
     
    #4 Anonymous, 11 янв 2007
  5. Ti

    Ti Активный пользователь

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
    Код (Text):
    1. #menu, #content { float: left; }
     
    #5 Ti, 11 янв 2007
  6. Anonymous

    Anonymous Guest

    Ti, firefox, Opera, разрешение 1024х768. Что будет?
     
    #6 Anonymous, 11 янв 2007
  7. Vitas

    Vitas Активный пользователь

    С нами с:
    7 фев 2006
    Сообщения:
    595
    Симпатии:
    0
    Адрес:
    Новосибирск, Академгородок
    Горбунов Олег, точно! (а почему 190 я уже понял) :)
    Нее, я люблю фоксу! :)
    Не-а.
     
    #7 Vitas, 11 янв 2007
  8. Ti

    Ti Активный пользователь

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
    дабы измежать многих проблем, в будущем
    1. если значение не 0 указывайте единицу измерения
    2. не указывайте ширену/высоту и соотв. отступ для одного элемента - в разных браузерах интерпритируеца по разному
    3. XHTML 1.0 Strict
    4. TopStyle, Menu Tools->Format Style Rule As *
    5.

    Код (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4.  
    5. <html>
    6. <head>
    7.     <title></title>
    8.     <style>
    9.         body            { font: 10pt arial; color: #6A6A6A; }
    10.         #main           { width: 750px; margin: 0 auto; }
    11.         #menu           { width: 150px; float: left; color: #FFFFFF; background: #bf0000; }
    12.         #content        { width: 600px; background: #F9F9F9; }
    13.         #menu, #content { float: left; }
    14.         .padding        { padding: 10px 20px; }
    15.     </style>
    16. </head>
    17. <body>
    18. <div id="main">
    19.  
    20.    <div id="menu">
    21.         <div class="padding">
    22.             Текст
    23.         </div>
    24.    </div>
    25.    
    26.    <div id="content">
    27.         <div class="padding">
    28.             Текст<br />
    29.             Текст<br />
    30.             Текст<br />
    31.             Текст<br />
    32.             Текст
    33.         </div>
    34.    </div>
    35.  
    36. </div>
    37. </body>
    38. </html>
     
    #8 Ti, 11 янв 2007
  9. Anonymous

    Anonymous Guest

    [​IMG]
     
    #9 Anonymous, 11 янв 2007
  10. Vitas

    Vitas Активный пользователь

    С нами с:
    7 фев 2006
    Сообщения:
    595
    Симпатии:
    0
    Адрес:
    Новосибирск, Академгородок
    Без <div class="padding"> не работает (даже если padding внести в #menu и #content).
    А мне лишнее писать лень. :)
     
    #10 Vitas, 11 янв 2007
  11. Ti

    Ti Активный пользователь

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
    в первом посте я дал идею решения а не реализацию

    в хот кеи
     
    #11 Ti, 11 янв 2007
  12. Ti

    Ti Активный пользователь

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
     
    #12 Ti, 11 янв 2007
  13. Vitas

    Vitas Активный пользователь

    С нами с:
    7 фев 2006
    Сообщения:
    595
    Симпатии:
    0
    Адрес:
    Новосибирск, Академгородок
    Хмм... в IE отоюражается криво, а вариант Ti работает. Значит буду делать так, как сказал Ti.
     
    #13 Vitas, 11 янв 2007
  14. Vitas

    Vitas Активный пользователь

    С нами с:
    7 фев 2006
    Сообщения:
    595
    Симпатии:
    0
    Адрес:
    Новосибирск, Академгородок
    Мда... Оказывается DOCTYPE играет нехилую роль (в IE без него содержимое находится слева).
     
    #14 Vitas, 11 янв 2007
  15. Anonymous

    Anonymous Guest

    =)))
    Там еще много сюрпризов впереди))
     
    #15 Anonymous, 11 янв 2007
  16. Vitas

    Vitas Активный пользователь

    С нами с:
    7 фев 2006
    Сообщения:
    595
    Симпатии:
    0
    Адрес:
    Новосибирск, Академгородок
    Горбунов Олег, ты в аське не отвечаешь.
     
    #16 Vitas, 11 янв 2007
  17. Vladson

    Vladson Старожил

    С нами с:
    4 фев 2006
    Сообщения:
    4.040
    Симпатии:
    26
    Адрес:
    Estonia, Tallinn
    #17 Vladson, 11 янв 2007
  18. draak

    draak Guest

    Там дело в падинге
    PS - Написал подсветку HTML в phpbb, а как мне моношириный шрифт выбрать незнаю.
     
    #18 draak, 5 фев 2007
  19. virabhadra

    virabhadra Активный пользователь

    С нами с:
    11 дек 2006
    Сообщения:
    127
    Симпатии:
    0
    Адрес:
    Praha, Czech Republic
    Скопировал этот код:

    Запустил в ИЕ, красный и серый прямоугольники с текстом позиционируются по горизонтали.
    Т.е. не так как там на скриншоте.
     
    #19 virabhadra, 15 фев 2007
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)