html - My 3 divs aren't lining up properly. Right most div is being pushed down by undefined margin? -

html - My 3 divs aren't lining up properly. Right most div is being pushed down by undefined margin? -

i have 3 divs within wrapper div. within wrapper div, leftmost div arrow image i'm using navigate between sliders using js. middle div slider, , right div right arrow move next slider.

here's code slider:

<div class="twocol_double"> <div class="btn_left"></div> <div id="slide_wrapper"> <div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;"> <h3>heading1</h3> <p>“lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in vol</p> </div> </div> <div class="btn_right"></div> </div>

there multiple slide classes, sake of question added 1.

for reason though, right div right arrow beingness pushed down. looking @ in chromes element inspector there 50px right margin on slider div i'm not defining anywhere (i see orange color, there's no css markup it).

i've recreated problem in jsfildde here: http://jsfiddle.net/mazbf/1/

i want right arrow line other 2 divs. i've wrecked brain trying figure out , debug in chrome no avail. missing simple?

i think issue you're having right div position:relative while left position:absolute. think can simplify layout using simple floats though:

html

<div class="twocol_double"> <div class="btn_left"></div> <div id="slide_wrapper"> <div class="slide"> <h3>heading1</h3> <p>“lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in vol</p> </div> </div> <div class="btn_right"></div> </div>

css

.twocol_double { width: 500px; float: left; font-size: 1.2em; } .btn_left { cursor: pointer; display: block; width: 20px; height: 170px; float: left; background: #ccc url("http://i.imgur.com/7byszjd.gif") no-repeat center center; } #slide_wrapper { width: 460px; height: 131px; display: block; float:left; } .btn_right { cursor: pointer; width: 20px; height: 170px; float: right; background: #ccc url("http://i.imgur.com/0qrkq2m.gif") no-repeat center center; } h3 { font-size: 1.5em; color: #7dac20; } p, blockquote { padding-bottom: 20px; font-size: 1.3em; color: #636b75; line-height: 20px; }

http://jsfiddle.net/eb3ta/

html css css-float