CODEWITHSUNDEEP
htmlcss
Jason Kelly
Jason Kelly

Reputation: 2655

Div with a fieldset aligned to the right

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: enter image description here

This is my desired result: enter image description here

<!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>

Upvotes: 1

Views: 15939

Answers (2)

Ben Broadley
Ben Broadley

Reputation: 632

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.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191829

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.

http://jsfiddle.net/At63D/

You could also float: right the inner div, but you would have to apply a clearfix to the outer div.

Upvotes: 1

Related Questions