4 replies to this topic

[Robbie.Knox]

Ok I have this code:

<div class="header">
	<div class="button">
	
	</div>
	<div class="button">
	
	</div>
</div>

With this CSS:

.header {
width: 100%;
height: 254px;
background-image: url(images/headerbg.jpg);
background-repeat: repeat-x;
}

.button {
width: 113px;
height: 41px;
background-image: url(images/button_transparent.gif);
background-repeat: no-repeat;
padding-right: 30px;
}

So as you can see I want to display two buttons horizontally (eventually I want to add more) with a gap of 30px between them, inside a Div called header.

How can I avoid this happening?



I've tried display: inline; but then the buttons just disappear.

Any help?

Thanks

Rob

Edited by Robbie.Knox, 12 June 2007 - 09:42 AM.

[albinoAZN]

change the .button class to this

.button {
width: 113px;
height: 41px;
background-image: url(images/button_transparent.gif);
background-repeat: no-repeat;
margin-right: 30px;
float:left;
}

basically all I did was add float:left, and changed padding to margin

[Robbie.Knox]

Thank you!

[albinoAZN]

no problem buddy

[Will0wz]

Isn't P2L just so sweet and romantic