/    Sign up×
Community /Pin to ProfileBookmark

Aligning multiple tables

Copy linkTweet thisAlerts:
Oct 20.2005

I have an application that will only be certified only with IE. It will mimick a spreadsheet where the top and left side are frozen and the data in the middle can scroll (freezing the heading info). DIV1,DIV3 and DIV5 are holding the headings (frozen) and DIV2,DIV4 and DIV6 are holding the data (scrollable).

DIV1 DIV2
DIV3 DIV4
DIV5 DIV6

This works fine when my resolution is set to 1024X768 and when the screen is maximized. If not, my data (DIV2,4,6) is displaying below the headings.
Is there a way to get it to display with DIV2 always to right of DIV1, DIV4 always to right of DIV3 etc. reguardless of how the resolution is set and how big the screen is?

I tried using display in-line but it didn’t seem to help.

#div1{ height:61px; width:274px; overflow:hidden;
float:left;
}
#div2{ height:61px; width:672px; overflow:hidden;
}
#div3{max-height:363px; width:274px; overflow:hidden;
float:left;
height:expression(
this.scrollHeight > 363? “363px” : “auto” );
}
#div4{max-height:380px; width:672px; overflow:auto; overflow-x:scroll; overflow-y:scroll;
height:expression(
this.scrollHeight > 380? “380px” : “auto” );
}
#div5{ height:70px; width:274px; overflow:hidden;float:left;clear:both;
}
#div6{ height:70px; width:672px; overflow:hidden;
}

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 20.2005 — Have a wrapper around the div's, another div or use [I]body {width:950px;}[/I]
Copy linkTweet thisAlerts:
@rmaganauthorOct 20.2005 — Can you please give me an example of the wrapper or body method?
Copy linkTweet thisAlerts:
@FangOct 20.2005 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>body wrapper</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
body {width:950px;}
#div1{ height:61px; width:274px; overflow:hidden;
float:left;
}
#div2{ height:61px; width:672px; overflow:hidden;
}
#div3{max-height:363px; width:274px; overflow:hidden;
float:left;
height:expression(
this.scrollHeight > 363? "363px" : "auto" );
}
#div4{max-height:380px; width:672px; overflow:auto; overflow-x:scroll; overflow-y:scroll;
height:expression(
this.scrollHeight > 380? "380px" : "auto" );
}
#div5{ height:70px; width:274px; overflow:hidden;float:left;clear:both;
}
#div6{ height:70px; width:672px; overflow:hidden;
}
</style>

</head>
<body>
<div id="div1">head</div><div id="div2">data</div>
<div id="div3">head</div><div id="div4">data</div>
<div id="div5">head</div><div id="div6">data</div>
</body>
</html>
×

Success!

Help @rmagan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...