Building dialogs with auto adjusted content just with CSS

Each application/website uses some popup windows or modaldialogs (known from MS IE) to display some content. I will call them dialogs in the rest of the article. To keep such dialogs userfriendly and easy to use the dialog should have (or usually has) the structure which you can see in the picture on the left. A headline at the top, an endline at the bottom and a content container between those two. The best thing now would be to have the content dynamically adjusted to the free space between the headline and the endline. Also some scrollbars should come up if there is not enough space (see picture). I’ll explain how to do this.

Okay before I move on i need to note that this solution only works in Internet Explorer 5.0 and higher because of the usage of a Javascript “expression” within the CSS. I am looking forward to some equivalent solution for Mozilla. Thanks a lot in advance.

Click here to see what we’re going to produce…

Anyway here we go with the solution for this tricky problem As far as I remember I structured the dialog into headline, endline and content. This is a structure I would recommend you to use throughout your application. If you try to follow this easy structure you’ll save a lot of troubles. Especially when designing forms you don’t need to invent some new incredible design structures. Anyway so when you structure the dialog into these 3 sections we need to define some style for them. Here we go…

#headline { }
#content {
overflow:auto;
height:expression(document.body.clientHeight-document.getElementById('headline').offsetHeight-document.getElementById('endline').offsetHeight);
}
#endline {
position:absolute;
bottom:0;
width:100%;
}

Thats it! This definitions are needed in order to achieve the behavior of the dynamic content. The important line is line 5 it does all the magic. You see that the endline will be placed always at the very bottom and the content definition calculates the height by deducting the height of headline and endline from the available body height. Yeah you are right. What’s now nice is that we can call our dialog in whatever size we want to and the content is always adjusted to the dialogs size. So now you just need your HTML markup for the dialog which could look like this.

<div id="headline">Headline</div>
<div id="endline"><button>Close</button></div>
<div id="content">some content goes in here</div>

Note the the endline is before the content. The reason is because the content normally takes longer to load but we need the height of the endline already to calculate the height of the content. In theory this should not work because the style is loaded even before the div is rendered but somehow it works I never tried it on the web just on intranets but it works fine. The code above has no appereance definitions in it so if you want it freaky & funky you need to play around with the CSS a bit or just hava look at the sourcecode of the sample ive created.

Dialog with auto adjusted content.

2 comments on “Building dialogs with auto adjusted content just with CSS”