Menu
I've noticed that the <input> element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below:
<html> <head> <style><!-- #someid { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; } --></style> </head> <body> <input type="text" id="someid" value="something"/> </body> </html> The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser.
If I use "left" and "width", and "top" and "height", then everything works fine. However I don't know what is the width and the height, I want them adjusted depending of the size of the browser window.
Any ideas how to work around this?
Thanks.
768
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
The absolute value positions the element absolutely relative to its container. With absolute positioning, you can place an element anywhere on a page.
The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
You can Use a Wrapper DIV
<html> <head> <style><!-- #wrapper { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; } #someid { /* position:relative; EDIT: see comments*/ height:100%; width:100% } --></style> </head> <body> <div id="wrapper"> <input type="text" id="someid" value="something"/> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
