css3 - Positioning of two inputs on the same line -


on http://www.southdevonaonb.org.uk/cordialemapping/ in of tabs under "wembury" have 2 inputs on same line - first check box , second image (blue information icon).

i want both inputs float right of parent div vertically appear inline.

this html:

letterbox locations , results <input type="image" align="right" id="info-image" class="info-image" src="images/info.png" title="click more information layer" onclick="layer0()" value='info'/> <input type="checkbox" id="layer0" onclick="togglelayer(0)" unchecked><br /> 

and css:

.info-image{ float:right !important; display:inline !important; }  #info-image{ float:right !important; display:inline !important; } 

what have tried:

i have given input image class , id , tried forcing float right trying display tag similar effect, no luck. how can achieve this?

screenshot here of trying achieve:

http://www.southdevonaonb.org.uk/cordialemapping/help/screenshot1.png

i not sure how want appear, things perceived, here solution.

the html:

<input id="info-image" class="info-image" align="right" type="image" src="images/info.png" title="click more information layer" onclick="layer100()" value="info"> <br> <input id="layer100" type="checkbox" unchecked="" onclick="togglelayer(100)" style="margin-right: -15px; margin-top: 7px;"> 

the css:

.info-image{ float:right !important; display:inline !important; }  #info-image{ float:right !important; display:inline !important; } 

hope helps.

edit

i got screenshot notification , have made edits.

the html:

<div> <p style="float: left; width: 70%;">parish boundary line parish boundary line</p> <p> <input align="right" type="image" value="info" onclick="layer100()" title="click more information layer" src="images/info.png" class="info-image" id="info-image"> <input type="checkbox" unchecked="" onclick="togglelayer(100)" id="layer100"> </p> </div> <div> <p style="float: left; width: 70%;">parish boundary line parish boundary line</p> <p> <input align="right" type="image" value="info" onclick="layer100()" title="click more information layer" src="images/info.png" class="info-image" id="info-image"> <input type="checkbox" unchecked="" onclick="togglelayer(100)" id="layer100"> </p> </div> <div> <p style="float: left; width: 70%;">parish boundary line parish boundary line</p> <p> <input align="right" type="image" value="info" onclick="layer100()" title="click more information layer" src="images/info.png" class="info-image" id="info-image"> <input type="checkbox" unchecked="" onclick="togglelayer(100)" id="layer100"> </p> </div> 

you need need remove <p> tag has checkbox , image , replicate full <p> tag <div> code provided above. hope helps now.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -