Позиционирование по абсолютным позициям divs

Question

У меня есть 4 divs, содержащие изображения, абсолютные позиции, общая ширина 100%.

Это связано с тем, что пользователь хочет использовать всю ширину страницы во всех браузерах.

Мне нужно расположить под ним div, также со 100% шириной, которая расширяется/с той же скоростью с браузером.

Я понимаю, что плавание - это не вариант.

Желаемая расположение:

[img1][img2][img3][img4] 
[  content  ] 
-------100% width------- 

HTML

 <div id="container"> 
      <div id="image1"><img src="images/1.jpg"></div> 
      <div id="image2"><img src="images/2.jpg"></div> 
      <div id="image3"><img src="images/3.jpg"></div> 
      <div id="image4"><img src="images/4.jpg"></div> 
     </div> 

    <div id="content"> 
    </div> 

CSS:

#container{ 
    width: 100%; 
    position: relative; 
    height: auto; 
} 

#image1 { 
     width: 25%; 
     position: absolute; 
     right: 50%; 
} 
#image2 { 
    width: 25%; 
    position: absolute; 
    right: 75%; 

#image3 { 
    width: 25%; 
    position: absolute; 
    left: 50%; 
} 
#image4 { 
    width: 25%; 
    position: absolute; 
    left: 75%; 
} 

#content { 
    width: 100%; 
    height: auto; 
} 

img { 
    max-width: 100%; 
    height: auto; 
} 

Answer 1

Используется для этого метода

Live Demo ---------------------------- Demo-two

Css

#pic-container{ 
font-size:0; 
} 
#pic-container img{ 
width:25%; 
    vertical-align:top; 
} 

HTML

<div class="container"> 
    <div id="pic-container"> 
<img src="images/1.jpg"> 
<img src="images/2.jpg"> 
<img src="images/3.jpg"> 
<img src="images/4.jpg"> 
     </div> 
    </div> 
    <div class="container"> 
       herer is the your content   
    </div> 

Live Demo

Answer 2

Если я не ошибаюсь взгляд на ваш код CSS:

вы забыли поставить закрытия "}" вашего # IMAGE2.
он должен выглядеть следующим образом.

#image2 { 
    width: 25%; 
    position: absolute; 
    right: 75%; 
} 

надеюсь, что это помогает.