Create a horizontal space 20% width

[joe92]

I think this is going to be very simple but it is just illuding me right now. What I want is to have two buttons in a form centered on their own line and equally spaced out between them by 20% of the parent div. Like so:

 

----------------------------------------------------------------------------------------------------

                                  [button]<-- 20%--> [button]                           

----------------------------------------------------------------------------------------------------

 

With the space on the other sides variable to whats left. This is my code so far, html:

<div class="mainContent">
Text, text and then some.<br/><br/>
<div class="center">
	<input type="button" value="Yes" /><p class="widener"></p><input type="button" value="No" />
</div>
</div>

CSS:

<style type="text/css">
.mainContent{
width:70%;
border:solid 1px #000;
}
.center{
text-align:center;
}
.widener{
display:inline;
width:20%;
}
</style>

 

Is there a way to do this without using tables? I would like the gap to be 20% as the div that it is positioned in is relative to the size of the window.

 

Cheers,

Joe

[haku]

Try this:

 

.center input, .center p
{
  float:left;
}

.widener
{
  width:20%;
}

 

Make sure you don't have the display set to inline, or the width will not work.

[joe92]

Hey, thanks for the response. That almost worked. It gave the buttons the wanted 20% gap between them, however floats the buttons together with the gap to the left now instead of in the center. With much playing around, I couldn't force it to sit in the center. Would you be able to explain how the following CSS class works to me please?

.center input, .center p {
float:left;
}

 

 

I found a workaround however. It is to place the buttons in a div which has a set width, I have found 35% looks nice, and to give the div margins left and right auto. I then float the buttons inside, one to the right, and one to the left. It gives the desired effect. It looks like this now, html:

<div class="mainContent">
Text, text and then some.<br/><br/>
<div class="widener centered">
	<input type="button" class="floatR" value="No" /><input type="button" class="floatL" value="Yes" />
</div>
</div>

CSS:

.centered{
margin-right:auto;
margin-left:auto;
}
.floatL{
float:left;
}
.floatR{
float:right;
}
.widener{
	width:35%;
}

 

Thank you for your help haku

 

Joe