CODEWITHSUNDEEP
htmlcss
Pavel P
Pavel P

Reputation: 16843

html layout for dynamic content

I added web interface for a program's output which looks like this:

<body>
<table id="header" approx height is 100px, width is 50% of screen located in the middle>
...
</table>
<div id="programoutput">my program outputs stuff here using Ajax.PeriodicalUpdater</div>
</body>

I use css for the div

#programoutput{ white-space:pre; }

and output from the program might contain very long lines. So, web page should have horizontal scrollbars then. What I want, is to make sure that the #header is always in the middle of the screen (not the body) and the body might become wider then the viewport based on the width of #programoutput.

I almost got it already, but I have some problems: horizontal scroll bar appears in the #programoutput itself not the window. and if height of the output is small (like a few lines in this case) then the horizoncal scroll bar is located in the middle of the window.

Upvotes: 0

Views: 183

Answers (1)

Passerby
Passerby

Reputation: 10070

#header
{
 position:fixed;
 width:50%;
 left:25%;
}
#programoutput
{
 white-space:pre;
 overflow:visible;
}

At this point your table should be placed in the center of view port, and your div should be long enough for your body to generate scrollbar.

But since the table is position:fixed, your div would "float" over your table. Now you have several options:

1. Give your div a top position: 

position:relative;
top:100px; /* you'll have to know your table's height */

2. Place your div at the bottom of the body (this seems valid in your code piece):

position:absolute;
bottom:0px;

Upvotes: 1

Related Questions