Question

I’m pretty sure the question has been asked and answered, I don’t know HTML and CSS well enough to know where or how to search. Any help would be appreciated.

I have a community application built in Silverlight: http://www.scalerailsonline.com/default.aspx

Having finally decided to give Microsoft the chuck I’m rewriting it from scratch. 90% of is pretty easy. I’m struggling with the HTML and CSS to accomplish the chat portion of the app.

I’ve marked up a screen shot to show what I’m trying to do.

The main goal is to create a scrollable container that expands and contracts to fit the available space.

First I want to have the web page expand or contract to fit in the browser window.

Second Right column expands horizontally to fit the content and the bottom area expands vertically to fit the chat entry controls.

Once the page is fit to the browser and the space is committed to the right and bottom, i want the container to fit. If the content in the container is too much (99% of the time it will be), then vertical scroll bar will display.

I have tried all kinds of combination of width/height: 100%. But that just seems to make the areas big enough to fit the content, not constrain to a 100% of the browser.

I can set the div to “Height: 200%; Overflow: Scroll” to get the scroll bars. But I just don’t seem to be able to get the div to expand only to the available space.

Answer 1

First I want to have the web page expand or contract to fit in the browser window.

This can be achieved by setting the margin left and right to auto. Try this –

.center {
    margin: 0 auto;
    padding: 0;
    float: none;
}