Tricky Layout Question

Forum Moderators: not2easy

Message Too Old, No Replies

Tricky Layout Question

Static widthdiv in the middle with a fledible right div

ryan_b83

4:59 pm on Nov 8, 2008 (gmt 0)

Hello, I have been trying to figure out this layout for the last couple days and have decided to look for help. Here is what I need to do:

-a centered static width div
-a right side flexible div which both sit at the top of the page

Result: The body background-image can tile on left side of the middle div, and another background can tile on the right side of the middle div (tiling inside the right div). It is easy to do this with a flexible middle div but I find it very difficult to do it with a static middle div and flexible right div.

Thanks for lookin!
Ryan

ryan_b83

5:09 pm on Nov 8, 2008 (gmt 0)

This is as far as I am so far...

<html>
<head>
<style type="text/css">
#blue{
height:100px;
width:800px;
background:blue;
margin:0 auto;
}
#green{
height:100px;
background:green;
float:right;
margin-top:-100px;
}
.easyClear{
clear:both;
}
</style>
</head>
<body>
<div id="blue">stuff</div>
<div id="green">stuff</div>
</body>
</html>

mercedes

10:44 am on Nov 9, 2008 (gmt 0)

It's hard to archieve i think.

This because it's nearly impossible aligning a div which relative to centered div(a div that has css: margin: 0 auto;)

However i can do it for a specific resolution. Eg: 1024x768.

Here you are(1280x800)

<!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=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body, div, p { 
margin: 0; 
padding: 0; 
} 
#container-1st { 
margin-left: 240px; 
position: relative; 
} 
#container-fix { 
width: 800px; 
position: absolute; 
top: 0; 
left: 0; 
background-color: aqua; 
} 
#container-flex { 
margin-left: 800px; 
background-color: blue; 
} 
--> 
</style> 
</head> 
<body> 
<div id="container-1st"> 
<div id="container-fix">Content for id "container-fix" Goes Here</div> 
<div id="container-flex">Content for id "container-flex" Goes Here</div> 
</div> 
</body> 
</html>

[edited by: swa66 at 2:02 pm (utc) on Nov. 9, 2008]
[edit reason] line length cause horizontal scrolling [/edit]

swa66

4:45 pm on Nov 9, 2008 (gmt 0)

If you ignore IE6 for now -it need serious, but possible help in getting this done-, you can do this easily with absolute positioning.

You can center by setting the width and the left side at 50%, while using a negative half width as the left margin.

Similarly for the right side you could set the right at 0, and the left side at 50% with a positive margin of half the width of the centered block.

e.g.:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>untitled</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: green;
      }
      #content {
        width: 400px;
        position: absolute;
        left: 50%;
        margin-left: -200px; /*half it's width*/
        background-color: red;
      }
      #sidebar {
        position: absolute;
        left: 50%;
        margin-left: 200px; /*half the width of #center*/
        right: 0;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="content">
      content
    </div>
    <div id="sidebar">
      side
    </div>
  </body>
</html>

To solve it for IE6, I'd consider IE7.js or try to calculate the width of it in an expression in a conditional comment.