google wave css layout

how can one create a css layout as seen on google wave that resizes automatically according to window size without the need for scrolling (apart from the specific elements on each page which are using scrollbars) with each div positioned in a similar fashion as seen on the website? i really love this interface and have been trying to create it on dreamweaver (web programming is a hobby) without using tables as practice.

i am learnin开发者_运维问答g css from scratch.

i have included an image for reference.

many thanks!

The columns can be achieved using CSS floats. Simply create three div tags and apply float: left and assign a width to each one.

The 100% height can be achieved through CSS, but in Wave's case javascript is probably being used. The particular logic depends on the site's design, since you need to take into account other elements on the page, such as a header bar.

If you were interested, you could use Firebug/Developer console to inspect how Google Wave's basic layout is setup tag-wise. One wrapper div, 3 column divs, and a div or two within each column for the panels.

I made a lil example about how you could try to start achieving that kind of layout: http://jsfiddle.net/steweb/A77gy/

Working with widths is pretty simple because you set floating columns, % widths/margins and opla' you get the fluid width layout.

Working with heights is very hard I think, because if you want a 'fluid' behavior that also affects heights, without using abs positioning (good for setting % height, but you lose the % width powerful), you should do something with JS too (even if I would avoid to do something that concerns the pure layout by JS) - I apologize for this complicated sentence :D.

By dealing with this kinds of layout 'problems' you will also notice that some browsers (...IE?...) sometimes behave in a weird way... so you will need some kinds of tricks to make everything working in EVERY browser (this is the main challenge IMO)

markup:

<div id="header">
    <a href="#">link 1</a>
    &nbsp;|&nbsp;
    <a href="#">link 2</a>
    &nbsp;|&nbsp;
    <a href="#">link 3</a>
    &nbsp;|&nbsp;
    <a href="#">link 4</a> 
    <!-- or a <ul> -->
</div>
<div class="column" id="first-column">
    <div class="window" id="window-1"></div>
    <div class="window" id="window-2"></div>
</div>
<div class="column" id="second-column">
    <div class="window" id="window-3"></div>
</div>
<div class="column" id="third-column">
    <div class="window" id="window-4"></div>
</div>

css:

body, html{
    height:100%;
}
#header{
    width:100%;
    height:30px;
    background:black;
}
.column{
    float:left;
    margin:1%
}
#first-column{
    width:10%;
}
#second-column{
    width:30%;
}
#third-column{
    width:50%;
}
.window{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #CECECE;
    width:100%;
}
#window-1{
    height:100px;
}
#window-2{
    margin-top:10px;
    height:200px;
}
#window-3{
    height:310px;
}
#window-4{
    height:310px;
}