Home/ Questions/Q 7082275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:01:40+00:00

I’m designing an interface for a service of mine and it needs to wrap

  • 0

I’m designing an interface for a service of mine and it needs to wrap the whole view area. It’s more of an application then a normal web-page. I want to know best practices for modern technology like css 3.0. I don’t want to have to write this in flash.

example

Sorry that the photo is from mspaint, but it was quick and dirty.

The goal is to have the topbar rest in normal position with the left bar the same way. the middle section (the app area) needs to fill the rest with an overlay element that may surpass the application area.

I know I can do javascript calculations, but I was hoping for a better way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That layour is a fluid/liquid width mixed with fixed width requirement. You can do that easily with normal CSS. You can do the box in low right hand corner by specifying fixed position in CSS.
    Check this for a liquid example example. More here

    Edit
    enter image description here
    Set the container element’s height to 100%. This is still rough but will get you started

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/test-style.css">
</head>

<body>

<div id="dv-Container">

    <div id="dv-header">
        <h2>Header</h2>
    </div>

    <div id="dv-sideBar">
        <h2>Side bar</h2>
    </div>

    <div id="dv-Content">
        <h2>Content</h2>
    </div>

    <div id="dv-Controls">
    </div>
</div>

</body>
</html>

    CSS file

    /* CSS Document */

html{
height:100%;
}

body{
margin:0;
padding:0;
min-height:100%;
height:100%;
}

h2,a{
    margin:0;
    padding:0;
}

#dv-Container{
background-color:#CCFFFF;
width:100%;
height:100%;
margin:0pt;
}

#dv-sideBar{
    float:left;
    width:200px;
    height:100%;
    background-color:#CCCCCC;
}

#dv-Content{
    float:inherit;
    background-color:#FFFFFF;
    width:100%;
    height:100%;
}

#dv-Controls{
    height:150px;
    width:100px;
    background-color:#00CC99;
    position:fixed;
    right:10px;
    bottom:100px;
    margin:0;
    float:right;
}
    • 0