Помогите расположить элементы на странице.

princeandrew · №1

Привет.
Помогите пожалуйста реализовать следующее расположение элементов на страничке.

Собственно проблема с расположением image и той таблички справа.
Они могут быть разной высоты. И блок ниже должен соответственно располагаться ниже наиболее высокого (у меня он всегда идёт ниже правой таблице залезая иногда под картинку). Это первое.

И второе хотелось бы, чтобы правая таблица автоматически выравнивалась по правому края начиная от картинки (т. к. у картинки может быть разная ширина). Сейчас ширина таблицы зависит от содержимого.

Al_H · №2

Нужно после обоих блоков добавить div, на класс которого повесить следующее:

Выделить код

Код:

.clearBlocks {clear: both; height: 0; line-height: 0;}

RcT · №3

У меня получилось только для IE, может кто посоветует как подправить для Firefox

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <style>
    #myimg {
    	float: left;
    }
    #tbl {
    	float: left;
    }
    #main {
    	float: left;
    }
</style>
  </head>
  <body>
   <div id="header1">header1</div>
   <div id="main">
      <img id="myimg" src="11.jpg" />
      <div id="tbl"><table border="1" width="100%">
                       <caption>Caption</caption>
                       <tr><td>td1<br><br/></td><td>td2</td></tr>
                       <tr><td>td3</td><td>td4</td></tr>
                    </table>
      </div>
   </div>
   <div id="header2">
   header2
   </div>
   <div id="mytext">
   text
   </div> 
  </body>
</html>

Так в IE
Так в FF

princeandrew · №4

Al_H
Спасибо. Действительно помогло. Только с таблицей ещё не разобрался, но так уже в основном всё нормально.
Вставил блок с этими свойствами сразу после того, который включает в себя (объединяет) картинку и таблицу и всё стало нормально.

Я плохо разбираюсь в свойствах типа clear, outline, float и т.п. Не умею их правильно комбинировать и располагать с их помощью блоки

Вот и пришлось сюда обращаться

Al_H · №5

Я плохо разбираюсь в свойствах типа clear, outline, float и т.п.

Есть замечательный учебник по CSS издательства O'Reilly (у нас - Питер, кажется), только он... длинный.
outline - хорошее свойство, но работает только в Опере и Файрфоксе, причем полная поддержка - только в Файрфоксе.

princeandrew · №6

Я веб-программрованием занимаюсь чисто для себя как любитель, то есть практически никак
Все эти нужды для своих собственных целей, а также именно для Firefox, ибо другими браузерами я совсем не пользуюсь.

Полезная информация

№116-05-2006 08:21:23