форматирование внутри дива

[happyproff]

Возникла проблема:

необходимо отформатировать название сайта и координаты фирмы следующим образом:

блок 100% ширины, высоты 100px, название сайта картинкой слева высотой в 100, координаты справа текстом в три строки привязаны к нижнему краю хеадера.

Сам хеадер логично сделать дивом, картинка тоже блочный элемент. текст можно хоть спаном, хоть дивом.

примерный html:

<div id="header">
<h1><img src="/images/sitetitle.jpg" /></h1>
<span class="contacts">
город, улица, дом
назавние@домен.ру
тел (000) 000-00-00
</span>
</div>

Заранее спасибо за возможные варианты решения!

[Victor Ananiev]

а в чем проблема, юзаем свойства HEIGHT WIDTH FLOAT

Для каждой строки свой див, все строки в один большой див и ему флоат слева, и картинке тож флоат слева, все) А зачем картинке H1??? Если для блока, то display:block;

Edited September 3, 2008 by Vindex10

[happyproff]

Дак и вроде бы всё хорошо, но:

Контакты должны бsnm привязаны к правому нижнему углу, а сам хедер - резиновый и растягиваться как раз между картинкой и контактами.

html:

<div id="header" width="100%" height="100px">
	<div id="home"><h1>
		<a href="localhost"><img width="350" height="100" src="/images/sitetitle.jpg" alt="сайтсайтсайт" border="0"/></a>
	</h1></div>
	<div id="contacts">
		<div>город, улица дом</div>
		<div>name@email.com</div>
		<div>тел. (000) 000-00-00</div>
	</div>
</div>
<div id="content">
</div>

css:

#header {
	height:100px;
	margin-top:10px;
	width:100%;
}

#home{
	float:left;
}

#contacts {
	text-align:right;
	float:left;
}

Edited September 3, 2008 by happyproff

[Victor Ananiev]

А раз к правому нижнему, тогда, для home пропиши position:relative; right:0; bottom:0; и text-align:right; а для contacts float:left писать не надо. да и с width для home поиграйся, так чтобы абсолютно и четко)

Edited September 3, 2008 by Vindex10

[happyproff]

А раз к правому нижнему, тогда, для home пропиши position:relative; right:0; bottom:0; и text-align:right; а для contacts float:left писать не надо. да и с width для home поиграйся, так чтобы абсолютно и четко)

ээ, "position:relative; right:0; bottom:0; и text-align:right;" это наверное для контактов, а не для home?

при position:relative; для contacts он не обращает внимания на bottom и right.

#header {
	height:100px;
	margin-top:10px;
	width:100%;
}

#home{
	max-width:1000px;
	float:left;
}

#contacts {
	text-align:right;
	max-width:1000px;
	position:relative;
	bottom:0px;
	right:0px;
}

[Victor Ananiev]

Во те стили:

BODY
{
margin:0;
padding:0;
}
#header
{
width:100%;
height:100px;
}
#header IMG
{
width:200px;
height:100px;
display:block;
float:left;
}
#contacts
{
float:right;
text-align:right;
width:200px;
height:100%;
margin-top:43px;
}

Во те разметка:

<div id="header">
<img src="WWWWWWWWWWWWWW" />
<div id="contacts">
<div>город, улица дом</div>
<div>name@email.com</div>
<div>тел. (000) 000-00-00</div>
</div>
</div>

[Amigos]

http://forum.htmlbook.ru/index.php?showtopic=10112

в самом низу.