Welcome to WebmasterWorld Guest from 54.161.149.107

Forum Moderators: not2easy

Tricky Layout Question

Static widthdiv in the middle with a fledible right div

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

5+ Year Member



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

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

5+ Year Member



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>

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

5+ Year Member



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]

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

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month