CODEWITHSUNDEEP
csslayouthtml
Andrej
Andrej

Reputation: 991

Simple CSS layout for chat app

I want to accomplish a seemingly simple div layout for a basic chat application and tried multiple things already, but none of them worked for this layout.

Here's the idea: chat layout

While the red bottom text-input part, and the right userlist part are supposed to be fixed at their location and of fixed size, the center blue content part should fill the remaining space.

The content part and the userlist part are supposed to scroll (green) their content vertically if needed, but there should be no scrollbar for the whole website.

And important: The whole website should automatically fill the size of the browser window.

It basically boils down to having columns and rows of "fill remaining space" and "fixed size" mixed, which is easily possible in the environment I usually code in (XAML).

Using features that aren't compatible with old browsers or even Javascript as (very) last resort would be acceptable. But I don't want to use tables.

Edit: Here's my current Code. At the moment I only tried to solve this for content and input area. This results in the input area (correctly) always being at the bottom, but the content area still occupying the whole height "behind" the input area. (Setting overflow and height on the messageContainer instead on the outerContainer doesn't help.)

<div id="outerContainer">
    <div id="messageContainer">
        <ul id="messageList"></ul>
    </div>

    <div id="inputContainer">
        <input type="text" id="msg"/>
        <button class="btn" id="broadcast">send</button>
    </div>
</div>

and

body
{
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#outerContainer
{
    text-align: center;
    margin-left: 32px;
    margin-right: 0px;
    overflow:auto;
    height: 100%;
}

#messageContainer
{
    text-align: left;
    margin-top: 32px;
    margin-bottom: 72px;
}

#inputContainer
{
    position:fixed;
    bottom:0px;
    margin-bottom: 32px;
    margin-left: 0px;
    margin-right: 32px;
    width: 100%;
}

Any ideas?

Thanks! Andrej

Upvotes: 2

Views: 9016

Answers (3)

Joseph
Joseph

Reputation: 119847

DEMO

HTML:

<div id="wrapper">
    <div id="upperPanel">
        <div id="chat">
            <ul>
                <li>
                    <span>Name:</span>
                    <span>tessadsda da das asd ad </span>
                </li>
                <li>
                    <span>Name:</span>
                    <span>tessadsda da das asd ad </span>
                </li>
                <li>
                    <span>Name:</span>
                    <span>tessadsda da das asd ad </span>
                </li>
            </ul>
        </div>
        <div id="friends">
            <ul>
                <li>
                    <span>fRIEND:</span>
                </li>
                <li>
                    <span>fRIEND:</span>
                </li>
                <li>
                    <span>fRIEND:</span>
                </li>
                <li>
                    <span>fRIEND:</span>
                </li>
            </ul>
        </div>
    </div>
    <div id="bottomPanel">
        <textarea>
        </textarea>
        <input type="submit" value="send" />
    </div>
</div>​​​​​​​​​​​​​

CSS:

html,body{
    width:100%;
    height:100%;
}

body{
    position:relative;
}

#wrapper{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border:1px solid #333;      
}

#upperPanel{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:100px;
}

#chat{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:200px; 
    background:#666;  
    overflow:auto;    
}

#friends{
    position: absolute;
    top:0;
    bottom:0;
    width:200px;
    right:0; 
    background:#999; 
    overflow:auto;   
}

#friends ul{
    text-align:right;
}

#bottomPanel{
    height: 100px;
    background:#EEE;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

#bottomPanel textarea{
    position:absolute;
    top:10px;
    bottom:10px;
    left:10px;
    right:120px; 
    resize: none;
}

#bottomPanel input[type=submit]{
    position:absolute;
    top:10px;
    bottom:10px;
     right:10px;
    width:100px;
}

​

Upvotes: 4

daxnitro
daxnitro

Reputation: 920

How about something like this?

<style type="text/css">
#left {
    height: 1px;
}
#left div {
    border: 1px solid blue;
    height: 100%;
    overflow: auto;
}

#right {
    width: 100px;
}
#right div {
    border: 1px solid red;
    height: 200px;
    overflow: auto;
}

#bottom div {
    border: 1px solid red;
    width: 400px;
    height: 100px;
}
</style>

<table>
    <tr>
        <td id="left">
            <div>
                asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />
            </div>
        </td>
        <td id="right">
            <div>
                asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />
            </div>
        </td>
    </tr>
    <tr>
        <td id="bottom" colspan="2">
            <div></div>
        </td>
    </tr>
</table>

Edit: Since tables won't do, here's another solution (Javascript). Using jQuery, the scripting is really simple (without jQuery it's not too difficult either, but jQuery spoils me so this is what I got). Can't think of any other solutions that don't use Javascript though.

<style type="text/css">

#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
}

#left {
    border: 1px solid blue;
    overflow: auto;
}

#right {
    border: 1px solid red;
    overflow: auto;
    width: 100px;
}

#bottom {
    border: 1px solid red;
    height: 100px;
    width: 100%;
}
</style>

<div id="wrapper">

    <div id="left">lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd</div>

    <div id="right">
        asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />
    </div>

    <div id="bottom">bottom</div>

</div>

<script>
    $(function(){
        var updateLayout = function() {
            $('#left').css({
                position: 'absolute',
                top: 0,
                left: 0,
                width: $('#wrapper').innerWidth() - $('#right').outerWidth(),
                height: $('#wrapper').innerHeight() - $('#bottom').outerHeight()
            });
            $('#right').css({
                position: 'absolute',
                top: 0,
                left: $('#left').outerWidth(),
                height: $('#wrapper').innerHeight() - $('#bottom').outerHeight()
            });
            $('#bottom').css({
                position: 'absolute',
                top: $('#left').outerHeight(),
                left: 0
            });
        };

        updateLayout();

        $(window).resize(function() {
            updateLayout();
        });
    });
</script>

Upvotes: 0

PREEB
PREEB

Reputation: 1362

Take a look at this and see if you like it. The concept is anchoring to the bottom with positioning. Fiddle

Upvotes: 0

Related Questions