Смещение изображений при изминении разрешения

[Utyfe]

Здравствуйте!

Разместил элементы при помощи стилей css на мониторе при разрешении 1440x900 :

<style type="text/css">
#col1{ /* 1 */
left: 3%; width: 32%; font-family: Times New Roman ,verdana, arial, sans-serif; font-weight: bold; font-size: 100%; color: black; border: 1px solid black; position: relative; float: left; padding: 10px; background: #ffcc66;
}
#col2{
height: 47%; border: 1px solid black; position: relative;float: left; padding: 1px; background: #ffcc66;
}
#col3{
height: 47%; border: 1px solid black; position: relative;float: left; padding: 1px; background: #ffcc66;
}
#col4{
left: 0%; width: 94%; font-family: Times New Roman ,verdana, arial, sans-serif; font-weight: bold; font-size: 110%; color: black; border: 1px solid black; position: relative; float: left; padding: 10px; background: #ffcc66;
}
</style>

<div id="col1"><div id="col2">
<img src="./1.jpg" align="left" width="150" border="1">
<img src="./3.jpg" align="left" width="291" border="1" hspace="1"></div><br clear="right">
<div id="col3">
<img src="./2.jpg" align="left" width="150" border="1">
<img src="./4.jpg" align="left" width="291" border="1" hspace="1"><br></div>
<div id="col4">
<u><i>Значение имени Клеопатра</i></u>&nbsp;:<br>
Клеопатра — <u>слава отца</u>.<br>Зодиак имени - Скорпион. Планета - Венера. Цвет имени - темно-зеленый. Благоприятное дерево - пальма. Заветное растение роза. Покровитель имени - змея. Камень-талисман - изумруд. Уменьшительные формы: <u>Клео</u>, Клера, Клепа, Клена, Лера, Патя. Имя и характер: сильная, безжалостная и страстная. Мужской аналитический ум и острая как жало интуиция. Энергична и всю жизнь будет добиваться успеха. Обладает острым чувством юмора, саркастична. Трезво оценивает события своей и чужой жизни. Не ведает полутонов в отношении к людям.
</div>
</div>

при проверке страницы на разрешении 1024x768 изображения съезжают.
Подскажите, какие есть варианты решения этой проблемы?

[13th]

во первых нельз совмещать position & float. Потом картинка - это весьма забавный элемент))) в том плане, что если места ей на одной "строчке " с другой не хватает , то последняя уходит вниз ( вообщем положение дел как у флотов со смещением в одном направление ). Вообще совет - первый див ,это который сол1, оставь как есть, внутри него помести

div {position:relative;width:100%;height:100%;}

а внутри него уже четыре дива с абсолютным позиционированием (размеры топ и лефт +ширины+ывсоты строго в процентах) , и в бекграунд кинь им эти картинки. Тогда появится эффект резины картинки

[Utyfe]

Спасибо!
Буду разбираться.

[13th]

Но опять же плюнь на мои советы если ты преследуешь какую то другую цель, а не показ картинок

[Utyfe]

В данный момент мне был интересен вопрос с изображениями и я так понял, что их "резиновость" достигается в большей степени установкой их фоном.
Так ли это?
Так же, уже точно не помню где, момент совмещения position и float - видел пример где вроде бы они в коде были указаны вместе, ну это ладно поищу разберусь, возможно я что-то недопонял.

Есть ещё один вопрос по поводу текста всё в тех же стилях, когда текст распологается в div'е он не заполняет польностью его, а при изменении того же разрешения он увеличивается и заполняет его полносьтю либо вылазиет за края слоя.

[Utyfe]

Изменил код, добавил :

div {position:relative;width:100%;height:100%;}

, убрал float (no float.jpg )

#col1{left: 3%; width: 32%;  position: relative;padding: 10px;}
div {position:relative;width:100%;height:100%;}

c float норма, либо так (float.jpg):

#col1{left: 3%; width: 32%; position: relative;padding: 10px;}
div {position:relative;width:100%;height:100%;}
#col1{float: left;}

с добавлением div слои немного увеличились в ширину

а внутри него уже четыре дива с абсолютным позиционированием

-- непонял внутри #col1 или в div'е ? , немного запутался

[13th]

<style type="text/css">
#number_one {float:left;width:30%;height:500px;}
.all_image {position:relative; width:100%;height:100%;}
.image_1,.image_2,.image_3,.image_4,{position:absolute;width:50%;height:50%;}
.image_1, {left:0;top:0;background: url('omage1.jpg') top left no-repat #FFF;}
.image_2, {left:50%;top:0;background: url('omage2.jpg') top left no-repat #FFF;}
.image_3, {left:0;top:50%;background: url('omage3.jpg') top left no-repat #FFF;}
.image_4, {left:50%;top:50%;background: url('omage4.jpg') top left no-repat #FFF;}
</style>
<div id="number_one">
<div class="all_image">
<div class="image_1"></div>
<div class="image_2"></div>
<div class="image_3"></div>
<div class="image_4"></div>
</div>
</div>
// ниче пояснять не буду. Развивайся . Всё очень легко самому понять

[Utyfe]

Да,благодарю

[Utyfe]

Значит, разобрался.
Вот что получилось у меня:

<style type="text/css">
#col1{float:left ; left: 3%; width:39%; height:449px; border: 1px solid black; position: relative; padding: 10px;/* Поля вокруг текста */background: #ffcc66;}
.all_image {position:relative; width:100%;height:102%;}
.image_1,.image_3 {position:absolute;width:41%;height:48%;}
.image_2,.image_4 {position:absolute;width:52%;height:48%;}
.image_1 {left:3%;top:0%;background: url('./1.jpg') top left no-repeat #fff;}
.image_2 {left:45%;top:0%;background: url('./3.jpg') top left no-repeat #fff;}
.image_3 {left:3%;top:50%;background: url('./2.jpg') top left no-repeat #fff;}
.image_4 {left:45%;top:50%;background: url('./4.jpg') top left no-repeat #fff;}
</style>

изображения сдвигаются, обрезаются по ширине границы классов :

.image_1,.image_3 {position:absolute;width:41%;height:48%;}
.image_2,.image_4 {position:absolute;width:52%;height:48%;}

[SkyM@n]

Смещение изображений при изминении разрешения

Но таки русский язык выучите.