how to show close button on right top side instead of left - html

Question

I am using light box for image but the close array display at the left top but i want it to the right I am new to CSS.
My HTML code is given for light box on linkbutton one
<div class="linkbutton">
<img src="image/smallicon_2.png" alt="" />
</div>
</div>
<div id="page_two" class="panel">
<div class="main_heading_two">Strategy</div>
<div class="menu">
<ul>
<li class="stix"></li>
<li><img src="image/overview.gif" /></li>
<li class="stix"></li>
<li><img src="image/strategy_active.png"/></li>
<li class="stix"></li>
<li><img src="image/draxxin.gif"/></li>
<li class="stix"></li>
<li><img src="image/excede.gif"/></li>
<li class="stix"></li>
<li><img src="image/results.gif"/></li>
<li class="stix"></li>
<li><img src="image/reference.gif"/></li>
<li class="stix"></li>
</ul>
</div>
<div class="rightclass_one"><img src="image/whiteslide.png"/></div>
<div class="pagetwo_text"><p>Get up to 21 days of BRD therapy strategy using longer-duration antimicrobials DRAXXIN ® (tulathromycin) Injectable Solution and EXCEDE ® (ceftiofur crystalline free acid) Sterile Suspension.
</p></div>
<div class="pagetwo_list_text">Advantages for Producers:
<ul><li>Fewer treatments</li>
<li>Less stress on cattle</li>
<li>Fewer mortalities</li>
<li>Cattle can recover in their own pen
</li>
<li>Lower treatment costs and higher profits
</li></ul></div>
<div class="pagetwo_list_text2">Extended duration strategy
</div>
<div>
<ul>
<li class="midmenu_1"><img src="image/backward.png"/></li>
<li class="midmenu_2"><img src="image/forward.png"/></li>
</ul>
</div>
<div class="right_text"><p>Either way you use them, it takes both DRAXXIN and EXCEDE for control and treatment of BRD in high-risk cattle to give you the longest duration of BRD therapy
</p></div>
<div class="image_21"><img src="image/pagetwo_graph_two_4.png"/></div>
<div class="ratemeter"><img src="image/pagetwo_graph_one.png"/></div>
<div id="one" class="image_one" ><img src="image/optiononetwo.png"/></div>
<div id="two" class="image_two"><img src="image/optiononeone.png"/></div>
<div id="three" class="image_one_one" ><img src="image/pagetwo_graph_two_11.png" /></div>
<div id="four" class="image_two_two" ><img src="image/pagetwo_graph_two_22.png"
/></div>
<div class="option_image"><img src="image/option_1.png" onclick="showHideDiv()"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="image/option_1.png" onclick="showHideView()"/></div>
<div class="option_image_label_one">Option 2</div>
<div class="fourteen_day"><img src="image/button_14days.PNG"/></div>
<div class="heading_one">Post Metaphylaxis Interval (PMI)</div>
<div class="linkbutton_one">
<img src="image/smallicon_1.png" alt="" />
</div>
<div class="seven_day"><img src="image/button_7days.PNG"/></div>
<div class="heading_two">Post Treatment Interval (PTI)</div>
<div class="linkbutton_two">
<img src="image/smallicon_1.png" alt="" />
</div>
</div><!-- End of page two-->
Belos is my css which used for light box
.lb-data .lb-close {
width:35px;
position: absolute;
float: right;
padding-bottom: 0.7em;
outline: none;
top:-35px;
}
Image shows cross sign on right side but far away from image

Answer 1

apply:
right:0px;
float won't work in conjunction with absolute positioning.

Answer 2

Write like this:
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
& there is no need to define float when you use position:absolute because float is not work with position:absolute

Answer 3

It's not easy to answer without seeing some other html code, anyway float and position: absolute don't work together. I suggest you to remove the floating and add right: 0; to your css definition. You should also be sure that the parent of .lb-close has set position: relative;

Answer 4

.lb-data .lb-close
{
width:35px;
position: absolute;
/*float: right;*/ <-- delete this
padding-bottom: 0.7em;
outline: none;
top:-35px;
right: 0; <-- new line to add
}

Answer 5

One important thing float doesn't work with absolute-position so you don't need to define float over here u just need to add right:0; i hope this will work smoothly....
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
UPDATED ANSWER
see here the demo is working fine:-
http://jsbin.com/ilixux/5/edit
I have made this through position:relative; to its parent and position:absolute; to its child and now its working fine as you can see....

Answer 6

add left: to your css code and place it where you exactly desire it.
eg:
left: 100px;