Div with a fieldset aligned to the right
Question
I have a little bit of problem, that I can't seem to quite figure out on my own.
How can I have a 100% width container div that has a fieldset and input box aligned to the right, it seems that my current result is that the groupbox overrides my desired div width and thus stretches it 100% in the pic:
This is my desired result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 100%;">
<div style="width: auto; text-align: right;">
<fieldset style="padding: 5px; border: 1px solid rgb(128,128,128);">
<legend style="color: rgb(11,63,113); font-weight: bold; font-size: 11pt;">File Number</legend>
<input type="text" id="fileno" style="background: white url(images/glass.png) left no-repeat; padding-left: 19px;" onkeydown="handleKeyDown(event,this)">
</fieldset>
</div>
</div>
</body>
</html>
2 answers
solution1
1 2013-11-20 13:52:31
There are a variety of solutions. The main issue is that the inner div is display: block and creates an entire block (takes up the entire width even with width: auto . One possibility is to change it to display: inline-block . You can also use text-align: right on the outer div to have it on the right side like you want.
You could also float: right the inner div, but you would have to apply a clearfix to the outer div.
solution2
0 ACCPTED 2013-11-20 13:54:12
You just need to apply a width element to the field set element and float it to the right.
<div style="width: 100%;">
<div style="width: auto; text-align: right; border: 1px solid red; height: 75px;">
<fieldset style="padding: 5px; border: 1px solid rgb(128,128,128) width: 200px; float: right">
<legend style="color: rgb(11,63,113); font-weight: bold; font-size: 11pt;">File Number</legend>
<input type="text" id="fileno" style="background: white url(images/glass.png) left no-repeat; padding-left: 19px;" onkeydown="handleKeyDown(event,this)">
</fieldset>
</div>
DEMO using your code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.