Want to Set controls width with respect to Div in CSS

Question

I have a scenario in which i need to show a input button alignment based on div control.The width of div will vary so i want that with respect to div width my input button will set it's width.Here im goin to paste two images

Image 1 :-

In first image the width of div is 100px so the save and close button must be placed above grid like it show here.If the width of div increased then Input button must move with it.

Image 2:-

In second case if div width increased then Buttons position moves with div width.

Edit:-

<div class="outer">
        <input id="Submit1" type="submit" value="Save" />
        <input id="Submit2" type="submit" value="Close" />
        <div class="inner">
        </div>
</div>

This is my scenarion,here position of button will depend on the position of inner div not the outer one.

Hope you understand.

Note :- Buttons alignment or position totally depend upon div width or alignment .

Answer 1

Hello mate i did a try:

CSS:

.container {
height:200px;
width:400px;
border:solid;}

.close {
width:33%;
float:right;
border:solid;
height:100px;}

.save{
width:33%;
float:right;
border:solid;
height:100px;
margin-right:10px;}

.content {
position:relative;
   width:100%;
height:90px;
border:solid;
bottom:2px;
float:right;}

HTML:

<div class="container">

<div class="close"></div>
<div class="save"></div>
<div class="content"></div>

</div>

http://jsfiddle.net/pNZ62/2/

Of course you can style it better! :P Btw increase or decrease the width of the container to see that it works! Hope I helped a bit.

Answer 2

You can keep all the three blocks in a div and give widths of each block in percentages.

.save{width:20%;}
.close{width:20%;}
div{width:90%;}

Answer 3

您可以设置一个包装div和输入的容器元素，然后将输入宽度设置为适合您需要的百分比，例如，每个输入为25％，div为100％

Answer 4

Here is the JSfiddle

HTML:

<div class="outer">
    <input id="Submit1" type="submit" value="Save" />
    <input id="Submit2" type="submit" value="Close" />
    <div class="inner"></div>
</div>

CSS:

#Submit1, #Submit2 {
    width: 22%;
    float: right;    
}
.inner {
    width: 100%;
    clear: right;
}