CSS Constrain-based Layout for html pages

I like the way Flex 2 layouts the components using constrained-based method. I thought it would be great if the same technique can be applied to html pages for css layout. So I tested it with the following code:

<style type=”text/css”>
<!–
#apDiv1 {
 position:absolute;
 left:20px;
 top:20px;
 z-index:1;
 right: 20px;
 bottom: 20px;
 background-color: #FF00FF;
}
#apDiv2 {
 position:absolute;
 left:74px;
 top:45px;
 width:173px;
 height:65px;
 z-index:1;
 background-color: #FFFF00;
}
#apDiv3 {
 position:absolute;
 left:300px;
 top:45px;
 height:70px;
 z-index:2;
 background-color: #00FFFF;
 right: 50px;
}
#apDiv4 {
 position:absolute;
 width:176px;
 height:66px;
 z-index:3;
 background-color: #FFFF00;
 right: 50px;
 bottom: 50px;
}
–>
</style>
</head>

<body>
<div id=”apDiv1″>
  <div id=”apDiv4″></div>
  <div id=”apDiv3″></div>
  <div id=”apDiv2″></div>
</div>
</body>

 And guess what, both IE 7 and FF 2 rendered the page correctly as the browser window  was being resized. Haven’t tested on Safari but hopefully it would work as well. Unfortunately, Dreawmeaver CS3 didn’t render the CSS page correctly. Bummer. Neither did the Microsoft Expression Web though.

Advertisements

~ by brianchau on July 18, 2007.

One Response to “CSS Constrain-based Layout for html pages”

  1. Hello, I’m running my own business and I use business credit cards for that, which gives me generous discounts on certain type items. Now I’m thinking of making additional funds with credit cards and for this purpose I’m looking for 0% intro APR credit card deals. I think I’ve found some and mean to make an application at

    credit cards for people with no credit gurenteed

    mc216d

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: