homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Tricky Layout Question
Static widthdiv in the middle with a fledible right div
ryan_b83




msg:3782615
 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




msg:3782622
 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




msg:3782899
 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




msg:3783027
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved