Locking Div with His Mother

Question

I use this CSS to display a fixed block on the left side of my web page. This is a red box with the words SPECIAL EVENT in white, represented by an image.

.special_event{
    display:block;
    position: fixed;
    width: 52px;
    height: 29px;
    background:url(../images/special_icon.png);
    left:10.5%;
}

But when the screen resolution is more than 1200 pixels, the div is removed from the main content.

I would like the div to special_eventstay immediately adjacent to the main content regardless of screen resolution, as seen in the first shot. What is wrong and how to fix it?

Answer 1

You are looking for something like this:

the position is fixed relative to any position that is not static, therefore the content and the fixed element are always in the center and relative to its parent

HTML

<div id="content_wrapper" class="border">
    <div id="special_event" class="border"></div>
    <div id="main_content" class="border">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS

.border {
 border:1px solid red;   
}
#content_wrapper {
    width:800px;
    margin:0 auto;
    position:relative;
    left:50%;
    margin-left:-400px;
}
#special_event {
    display:block;
    position: fixed;
    width: 52px;
    height: 29px;
    top:0;
    margin-left:-52px;
    background:red;
}

Answer 2

.special_event , #main-content CSS:

#main-content {
    position:relative;
    ....
}

.special_event {
    position:absolute;
    width:52px;
    left: -52px;
    ...
}

JQuery

$(window).scroll(function() {
    var fixedTop = 100; // set to whatever you want
    $('.special-event').css({'top':fixedTop + 'px'});
});

Answer 3

position:fixed .

float:right div . position:fixed .special_event. right .special_event, .

Answer 4

jquery dom . jquery offset.top , special_event dom.

            // + you main content top
            function setTop(){

            var offset = $('main_content_selector').offset();

            var event_special_top = offset.top + 100; // here you can alter the 100 as per your need, it is used to center the special event dom relative to main content

            $('.special_event').css('top', event_special_top);

            }

            setTop();

            // event you can use the setTop with browser resize