When I add a left:0 div my right:0 div disapears

xgf666

Regular Member

Jan 18, 2011

206

98

• Oct 6, 2012

• #1

I try to add some div(s) to the sides of the main div for that I have


#maindiv ( position:relative)


#borderright (
position: absolute;
background: red;
width: 3px;
height: 100%;
right: 0)


#borderleft(
position: absolute;
background: red;
width: 3px;
height: 100%;
left:0)


now when I do


<div id="maindiv">
<div id="borderright">
</div>
<div id="rightborder">
</div>
<div id="leftborder">
</div>


</div>
Their is only 1 div showing ( the left one) if I delete the left div the right one is showing...


What am I doing wrong ?


Thanks for your help


Edit: When I look to the css with Chrome, it seems that div id rightborder style is empty, and if I had the styles myself in view mode it works !? Again, if I delet the left di (leftborder) the rightborder is showing up... Weird isn't it ?

edit2: maindiv has dimentions, don't pay atention to the fact that div are diferentmy names in the css and in the html.

 

Last edited: Oct 6, 2012

jazzc

Elite Member

Jan 27, 2009

2,964

14,717

• Oct 6, 2012

• #2

Better create a jsfiddle http://jsfiddle.net/

 

C

cgimaster

Power Member

Jun 30, 2012

569

330

• Oct 6, 2012

• #3

See example 6 seems to be what you are looking for.

http://www.barelyfitz.com/screencast/html-training/css/positioning/