Вёрстка двух колонок

systemiv · October 2, 2011

Здравствуйте уважаемые!

Подскажите пожалуйста:

Нужно сделать резиновый шаблон в две колонки, левая фиксированная, а правая(с контентом) тянется по всей длине.

Если можно, не кидайте ссылки на сервисы, п просто напишите тут как вы считаете.

Спасибо!

dostel1 · October 2, 2011

http://htmlbook.ru/samlayout/tipovye-makety/fiksirovannyi-dvukhkolonochnyi-maket

.layout { width: 980px; margin: auto; }
.sidebar {
 background: #C6DD7D; /* Цвет фона */
 width: 180px; /* Ширина колонки */
 float: left; /* Обтекание справа */
}
.content {
 background: #F4ECCE; /* Цвет фона */
 margin-left: 180px; /* Отступ слева */
}


 <div class="layout">
    <div class="content">Колонка 2</div>
    <div class="sidebar">Колонка 1</div>
  </div>

systemiv · October 2, 2011

Да, я именно это и читал.

Проблема вот в чём: http://www.dropbox.com/gallery/26245577/1/dev?h=d8e13a (первая фотка)

psywalker · October 2, 2011

Да, я именно это и читал.
Проблема вот в чём: http://www.dropbox.com/gallery/26245577/1/dev?h=d8e13a (первая фотка)

Колонки местами-то поменяй)

systemiv · October 2, 2011

Тогда получится вот так: http://dl.dropbox.com/u/26245577/floaf2colls2.jpg

Seemann · October 2, 2011

systemiv, а в чём проблема-то?

Левый блок - float:left с заданной шириной, а второй без указания ширины и margin-left: *ширина левой колонки + желаемый отступ*

systemiv · October 2, 2011

Seemann,

http://dl.dropbox.com/u/26245577/floaf2colls.jpg

Там где сместилось, просто не видно. Там 1 пункт меню. Если добавить ещё 1, то блок контента ещё ниже опустится

Edited October 2, 2011 by systemiv

psywalker · October 2, 2011

systemiv,

Что скажешь?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<div style="background: red; float: left; width: 200px;">1</div>
<div style=" background: blue; margin-left: 200px;">2</div>

</body>
</html>

systemiv · October 2, 2011

Извините пожалуйста за то что так напряг)

Да, у меня всё получилось.

Проблема такого отступа была из-за того, что joomla задавала свои стили. Сейчас их сбросил и всё норм.

Спасибо большое всем кто помог!)

psywalker · October 2, 2011

Извините пожалуйста за то что так напряг)
Да, у меня всё получилось.
Проблема такого отступа была из-за того, что joomla задавала свои стили. Сейчас их сбросил и всё норм.
Спасибо большое всем кто помог!)

Sign In

Вёрстка двух колонок

Question

systemiv

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

dostel1

Link to comment

Share on other sites

systemiv

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

systemiv

Link to comment

Share on other sites

Seemann

Link to comment

Share on other sites

systemiv

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

systemiv

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information