Прибить элемент справо при фиксе.

[Spamol]

Привет! В очередном заказе столкнулся с задачкой, которую не смог решить должным образом, пока сделал по-другому, решил узнать у Вас, реально решить задачу средствами разметки и стилей, не привлекая js?

Суть видна на картинке:

Классический интернет магазин, фиксированый макета, 1000px, шапка, меню, контент, футер, ничего не обычного, НО в контентой части есть 4 превью товара, а ссылку на "Все предложения" дизайнер засунул напротив блока за его пределами, да еще и нужно прибить к краю браузера, т.е. при растяжке сайта он удаляется от нашего блока, при сужение наезжает, при этом он реагирует на скролл, ездит четко напротив блока(position:fixed следовательно отпадает), так же при добавление контента сверху над блоком он должен оставаться также напротив наших товаров, т.е. вариант окружить контейнер резиновым блоком сделать его относительным, внутрь кинуть абсолютную картинку и сверху дать отступ до наших товаров тоже не подойдет(пока сделал именно так), ведь при добавление контента сверху товары сьедут вниз, а стрелка с ссылкой останется на месте.

Задача прибить ссылку к краю браузера и чтобы она реагировала на перемещения наших товаров и скролл, какие идеи?

Edited April 26, 2013 by Spamol

[Spamol]

Народ, почему молчите? Нет не у кого мыслей по этому поводу? Как тогда подобное можно решить на JS, если версткой невозможно?

[spdif]

по фотографии тут не лечат, нужен доступ к телу!

...

покажите код_

[Switch74]

пока я думаю такое реализовать через js но нужен код

[Spamol]

Ну какой код, стандартный для такого шаба, пусть будет такой:

<div class="wrap">
<div class="header"></div>
<div class="leftCol"></div>
<div class="content">
<div class="goods">
<div class="good">
первый товар
</div>
<div class="good">
второв товар
</div>
<div class="good">
третий товар
</div>
<div class="good">
четвертый товар
</div>
<div class="allGoods"><a href="#">Все предлы</a></div>
</div>
<div class="footer">
</div>
//css
#wrap{
width:1000px;
margin: 0 auto;
}

Edited April 28, 2013 by Spamol

[Switch74]

странный набросок, это нужно соединить данные с картинки, верстку и додумать самому css?..

http://jsfiddle.net/KSRw9/1/

можно так попробовать, но это как я понял и естесно с моими доработками, которые можно попробовать убрать

[Spamol]

Если над товарами добавить контент ссылка остается на месте и за товаром не следует http://jsfiddle.net/KSRw9/2/

Также у меня в работе родитель(.goods и .cont) был position:relative; всвязи с нестандартной структурой макета, поэтому если делать как в вашем примере у меня бы ссылка выровнялась по правой стороне контенера с товаром

Edited May 1, 2013 by Spamol

[Switch74]

1. не правильно вставили контент до

http://jsfiddle.net/KSRw9/3/

2. если вам нужен position:relative;

то придется сделать обертку дополнительную на всю ширину окна или использовать js

[Spamol]

И как сделать обертку в этом примере, если .cont{position:relative;} например, ведь даже если обернуть .cont он ссылку уже не выпустит за границу .cont, ссылку нужно выносить за пределы .cont, тем самым ссылка выпадет из блока товаров и не будет за ними следовать, при изменение окружающего контента....?

[Switch74]

обертка должна быть на всю ширину окна, а не страницы