DIV position is relative to a previous DIV

hi all

please see this code to understand what i'm talking about:

(open it in FF or ie8, not ie7 or ie6 because i didn't yet test the design on them)

^{<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>design</title>
<style type="text/css" media="screen">
body {
margin-top: 10px;
padding: 0;
background: #787878;
text-align: right;
direction: rtl;
font-family: "Traditional Arabic", Times, serif;
font-size: 16px;
color: #616161;
}
#page {
width: 90%;
margin: 0px auto;
min-width:744px;
/*width: expression(document.body.clientWidth < 744? '744px');*/
}
#content {
margin:0px 0px -19px 184px;
padding: 0px 0px 0px 0px;
background: #fff url(images_temp/white_pixel.jpg) repeat left top;
text-align:justify;
}
.post {
padding-bottom: 15px;
margin-right: 3px;
margin-left: 3px;
line-height: 200%;
}
.post h1 {
font-weight: bold;
}
.title {
height: 50px;
padding: 11px 2px 4px 0;
text-transform: capitalize;
font-weight: normal;
}
.title a {
border-bottom: none;
color: #528DC8;
}
#sidebar1 {
font-size:12px;
float: right;
margin: auto -4px;
}
#sidebar2 {
float: left;
margin:0 0 0 0px;
}
#sidebar1 ul {
padding-bottom: 20px;
}
#rightMenu{
font-weight: bold;
}
.sidebar {
float: left;
width: 180px;
background: #ccc;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
padding: 0 0 20px 0;
}
.sidebar li li {
margin: 0 10px 0 10px;
padding: 8px 0px 8px 3px;
border-bottom: 1px #B5B5B5 dashed;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="page" >
<div id="sidebar2" class="sidebar">
<ul>
<li><form id="searchform" method="get" action="#"><div><h2>Site Search</h2><input type="text" name="s" id="s" size="15" value="" /></div></form></li>
<li><h2>Tags</h2><p class="tag">tags</p></li>
<li><h2>Calendar</h2></li>
<li><h2>Categories</h2></li>
</ul>
</div>

<div style="height:1px; padding: 0 0 0 184px; margin: auto auto auto auto;">
<div style="background: url(images_temp/img04_1_1_2.gif) no-repeat left top; height:30px; width:12px; float:left;"></div>
<div style="background: url(images_temp/img04_1_3_2.gif) no-repeat right top; height:30px; width:12px; float:right;"></div>
<div style="background: url(images_temp/img04_1_2_2.gif) repeat-x; height:30px; margin:0 12px 0 12px;"></div>
</div>
<div id="content">
<div id="sidebar1" class="sidebar">
<ul>
<li><h2>Heading 2</h2><ul id="rightMenu"><li><a href="#">list 1</a></li></ul></li>
<li><h2>another heading 2</h2><ul><li><a href="#">( blah ) some text</a><br />and more text added tho this list item</a></li></ul></li>
</ul>
</div>
<div id="contentOld" style="margin:8px 188px auto auto; border:0px solid red;">
<div class="post">
<div style="height:50px; padding: 0 0 0px auto; margin: auto auto auto auto;">
<div style="background: url(/design/images_temp/img12_left_1.gif) no-repeat left top; height:50px; width:9px; float:left; margin: auto auto auto -9px;"></div>
<div style="background: url(/design/images_temp/img12_right_1.gif) no-repeat right top; height:50px; width:9px; float:right;"></div>
<div style="background: url(/design/images_temp/img12_mid_1.gif) repeat-x; height:50px; margin:0 9px 0 9px;">
<h1 class="title"><a href="#">title 1</a></h1>
</div>
</div>
<div class="entry">
<p><strong>entry text here</p>
</div>
</div>
<div class="post">
<div style="height:50px; padding: 0 0 0px auto; margin: auto auto auto auto;">
<div style="background: url(/design/images_temp/img12_left_1.gif) no-repeat left top; height:50px; width:9px; float:left; margin:auto auto auto -9px;"></div>
<div style="background: url(/design/images_temp/img12_right_1.gif) no-repeat right top; height:50px; width:9px; float:right;"></div>
<div style="background: url(/design/images_temp/img12_mid_1.gif) repeat-x; height:50px; margin:0 9px 0 9px;">
<h1 class="title"><a href="#">title 2</a></h1>
</div>
</div>
<div class="entry">
<p><strong>entry text goes here</p>
</div>
</div>
</div>

</div>
<div style="clear: both;"> </div>
</div>

</div>
</body>
</html>}

i have 2 bars (the blue bars) at the middle of the page : Title 1 and Title 2 .

each bar consists of a container DIV which contains 3 DIVs, left, right and middle.

simply, my problem is that in spite of the two bars are identical, the 1st bar is displayed will but the 2nd isn't , as you can see. the left DIV in the 2nd one is shifted to the left with 9px .
i think this is because the left DIV of the 2nd bar is displayed relatively to the left DIV of the 1st bar witch width is 9px and this explains why does the left DIV in 2nd bar is shifted exactly with 9px.

i tried to put a DIV with : style="clear:left" but it didn't fix the problem.

any ideas?
sorry for my bad english.

[edited by: swa66 at 11:23 pm (utc) on June 7, 2009]
[edit reason] URL removal from the code [/edit]

DIV position is relative to a previous DIV

how to make the DIV forget the previous div position

ahmedhelmy007

enigma1

ahmedhelmy007

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week