Hello, I need to register a miracle code in the html document in order to make 2 blocks (1 - Content, 2 - Right panel).

Here is the code:

<STYLE> .menu { font-family: 'Neucha', cursive; } .menu a{ /* Округления START */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* Округления END */ text-decoration:none; /* Убираем нижнюю линию под ссылкой */ color:#2277B0; /* Цвет ссылки */ padding:4px; /* Внутренний отступ */ } .menu a:hover{ border:1px solid #E7E7E7; /* Обводка */ /* Градиент START */ background: rgb(249,249,249); background: -moz-linear-gradient(top, rgba(249,249,249,1) 1%, rgba(237,237,237,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(249,249,249,1)), color-stop(100%,rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* Градиент END */ } td, th { padding:5px; /* Внутренний отступ */ background-color:#478CFB; /* Фон */ color:#fff; /* Цвет */ font:8pt 'Bad Script', cursive; /* Размер, семейство шрифта */ } table, tr, td, th { border:1px solid #5C98FC; /* Обводка */ border-collapse:collapse; /* Убираем двойные линии */ } .table { -webkit-border-radius: 10px; /* Округления */ -moz-border-radius: 10px; /* Округления */ border-radius:10px; /* Округления */ display:inline-block; /* Делаем так, что бы блок обтягивал таблицу */ overflow:hidden; /* Убираем все, что не поместилось в блок */ } table td:nth-child(odd) { background-color:#5493FC; /* Цвет фона */ } td:hover { background-color:#5493FC; /* Цвет фона */ } </STYLE> <head> <link href='http://fonts.googleapis.com/css?family=Neucha&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'> </head> <br> <div class="menu"> <a href="http://aukro.ua/my_page.php?uid=20188849">Обо мне</a><a href="http://aukro.ua/listing/user.php?us_id=20188849">Мои товары</a><a href="http://aukro.ua/show_user.php?uid=20188849">Отзывы</a><a href="http://aukro.ua/SendMailToUser.php?userId=20188849">Задать вопрос</a> </div> <br> <div class="table"> <div class="leftboard"> <table cellspacing="0"> <tr><th>Характеристики</th> <th>ZOPO ZP700</th><tr> <tr><td>Тип</td> <td>Смартфон</td><tr> <tr><td>Тип корпуса</td> <td>моноблок</td><tr> <tr><td>Габариты</td> <td>Вес: 148 гр<br>Размеры: 126×68×11 мм.</td><tr> <tr><td>Количество SIM – карт</td> <td>2 активных sim – карты(WCDMA+GSM/GSM+GSM)</td><tr> <tr><td>Операционная система</td> <td>Android 2.3</td><tr> <tr><td>Процессор</td> <td>MediaTek MT6575</td><tr> <tr><td>Стандарт связи</td> <td>WCDMA/HSDPA 900/2100MHz<br>GSM 900/1800/1900MHZ</td><tr> <tr><td>Дисплей</td> <td>Емкостной AVS экран с поддержкой Multitouch<br>материал - стекло.<br>4,3 дюйма QHD<br>16 млн.цветов<br>Разрешение экрана: QHD, 960х540 пикс.</td><tr> <tr><td>Функции памяти</td> <td>RAM: 1 Гб.<br>ROM: 4 Гб.<br>Слот для карт памяти microSD (TransFlash), расширение максимально до 32 Gb.</td><tr> <tr><td>Беспроводные технологии</td> <td>Bluetooth BT 3.0, EDR.<br>Wi-Fi b/g/n<br>GPS</td><tr> <tr><td>Камера</td> <td>Основная 8 Мп, автоматический фокус, цифровой зум<br>Фронтальная 0,3 Мп</td><tr> <tr><td>Аккумуляторная батарея</td> <td>Li-Ion, 1700 мАч</td><tr> <tr><td>Разъем под наушники</td> <td>3.5 мм</td><tr> <tr><td>TV</td> <td>Отсутствует.</td><tr> <tr><td>Комплект поставки</td> <td>Мобильный телефон<br>Батарея - 1 шт.<br>Зарядное устройство<br>USB-кабель<br>Стерео гарнитура<br>Руководство пользователя на английском языке.</td><tr> <tr><td>Цвет корпуса</td> <td>Черный.</td><tr></table> </div></div>

You need to make it look like in the picture:

alt text

  • 3
    The first is float: left; the second is float: right; - atnartur

3 answers 3

Someone uses float . Of course, this is also an option, but what if it is necessary to rearrange the content blog to the place of the right one, then go into the code and interrupt the floats. There is an option that I use.

html content

 <!--wrapper start--> <div class="wrapper"> <!--content start--> <div class="content"> Содержание контента тут может быть меню промо ролики и т.д. </div> <!--content end--> <!--sidebar start--> <div class="sidebar"> Боковая панель она может распологаться как слева так и справа </div> <!--sidebar end-->

</ div> <! - wrapper end ->

now let's adjust everything in CSS

 /* wrapper start*/ .wrapper { margin: 0 auto; width: 960px; } /* wrapper end*/ /* content start*/ .content { display: inline-block; width: 698px; vertical-align: top; border: 1px solid #000; } /* content end*/ /* sidebar start*/ .sidebar { display: inline-block; width: 258px; vertical-align: top; border: 1px solid #ccc; } /* sidebar end*/

And so we created two blocks. Now what is all this about. Suppose we need to swap the left and right parts, just go to html copy the entire [content] block and with all the content inside it and simply paste it below the [sidebar] block and that's it !!! so it should be like this. (And notice we didn’t even touch the styles)

html content

 <!--wrapper start--> <div class="wrapper">

(HERE CUT CONTENT UNIT)

 <!--sidebar start--> <div class="sidebar"> Боковая панель она может распологаться как слева так и справа </div> <!--sidebar end--> (ЗДЕСЬ ЕГО ПОСТАВИМ) <!--content start--> <div class="content"> Содержание контента тут может быть меню промо ролики и т.д. </div> <!--content end--> </div> <!--wrapper end-->

PS "wrapper" tag here you need wrappers for the entire contents of the site, in principle, for this is the "body", but I would not advise it to be ignored.

PSS yes, and I would not use td tr and so on. They are no longer relevant for lists or as they say for the menu it is better to use "streets with nested extras" <ul> <li> </li></ul> .

  • I agree, a good option. You should pay attention to the fact that inline and inline-block elements get some text properties. Including the replacement of all separators between them with a space. Apparently for this, you have the total width of the content and sidebar 4px less than a wrapper. Q: Are you sure that the space will always be 4px wide? - Cypher
  • By the way, this method has another big plus: inline and inline-block elements preserve vertical alignment of the baseline between themselves. Which is very convenient for following each other input type text text and input type submit, for example. - Cypher
  • 4px because border: 1px adds to the total width of the block, I set the border to be clearly visible, but in general it is not needed. Remove border (border: none;) and you can fully specify 700px and 260px. I apologize also forgot to insert the alignment on the top fixed in the code - nosensus
  • I apologize. Border missed :). Maybe I missed something else, but in the form in which the code is presented now, the blocks do not line up one after another: jsfiddle.net/E6Pa7 The point is just in the space that appears between the blocks due to inline nature. If we exclude in HTML everything that hits this space (all delimiters), then the example works: jsfiddle.net/E6Pa7/1 If you do not take this space into account, then the solution is not stable. Even if you'll write HTML without allowing separators, it’s not a fact that the one who will prog will not please them there. - Cypher
  • Stable solution?! ... hmm ... for me, the indentation between the blocks is not critical, anyway, during layout, one way or another there is an internal padding and it is possible to cut down this or that block by 2-6 pixels. Then it turns out that the best solution is to use Float. While I have no answer to your remark, if it appears, I will definitely write it off in this post (there is something to think about). - nosensus

Add width and wrap to both columns. Create a shedding wrap class.

 .menu { width: 260px; float: right; } .table { width: 700px; float: left; } .clearer { clear: both; }

After these blocks, add a tag co reset wrap. Otherwise, the next tag will continue to flow around the last block.

 <div class="menu"> ... </div> <div class="table"> ... </div> <br class="clearer">

PS: you can set the width in both pixels and percentages. Do not forget that indent values ​​and borders will also be added to the width. If you need a "half-rubber" layouts, then pay attention to something ready. , as it is an order of magnitude more difficult.

UPD: time and experience have shown that wrapping is not the best tool for creating columns and indeed any markup. But inline-block (see the answer nosensus) reinforced concrete mechanism ( if you deal with spaces ) and the best friend of the maker-up :)

     <frameset cols='*,50%' FRAMEBORDER=0 FRAMESPACING=0 BORDERCOLOR=#000000> <frame SRC='url' NAME='name_1' SCROLLING='AUTO' FRAMEBORDER=0> <frame SRC='url' NAME='name' SCROLLING='AUTO' FRAMEBORDER=0> </frameset>

    or

     <table width=1000 cellpadding="2" cellspacing="2" align="center"> <tr align="left"> <td><!-- Блок №1 --></td> </tr> <tr align="left"> <td><!-- Блок №2 --></td> </tr> </table>