Question

I would like create same as on stackoverflow – orange comunnicates, but i have problem with css. I dont know how to other page dont cover with messages. On stackoverflow orange messages have own space on the page (same as if messages == 1 or messages == 5) – how can i make it?

<div class="home">
    <div class="message">one
        <br />
        two
        <br />
        three
    </div>
    <div class="logo">AAAA</div>
</div>
<br /> <br />
<div class="home">
    <div class="message">one

    </div>
    <div class="logo">BBB</div>
</div>

.home {
    width: 400px;
    height: 200px;
    background-color: #f4f28d;
}

.logo {
    width: auto;
    height: 100px;
    background-color: blue;
    font-size: 80px;
}

.message {
    width: 400px;
    background-color: orange;
    border: solid 1px black;
    position: fixed;
}

JSFIDDLE: http://jsfiddle.net/JzUsG/

EDIT:
.message must be fixed – i want look this also if page is scrolling

http://jsfiddle.net/VnbZf/1/

Answer 1

Just fix the position at 0,0 and then add some margin on the top of the page calculated from the height of each message multiplied by the number of messages:

http://jsfiddle.net/C8uBS/

If you want something more “dynamic” without calculation on the server side you can calculate the height of the messages with javascript and then inject that into the appropriate position:

http://jsfiddle.net/kGXnZ/