Problem with centering div tags.. help please!

**pedroamorim** · 03-18-2008, 01:18 PM

I have been trying everything to center the content with in a container but it just does not work! The ideia is to have a button with variable width depending on the text i'll have on it. I already know if you use fixed width this can be done. I have also managed to center the container div. The code is to follow:

<<CSS>>
#button-next {
display: block;
padding: 0;
border: 0;
width: auto; /* This could also be fixed */
margin: 20px auto 0 auto;

background: #f5f5f5;
height: 47px;
text-align: center;
}
#button-next-left {
margin-left: auto;
float:left;
height: 47px;
width: 12px;
background-image: url('img/button-next-left.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #f5f5f5;
}
#button-next-right {
margin-left: auto;
text-align:center;
height: 47px;
width: 48px;
float:left;
background-image: url('img/button-next-right.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #f5f5f5;

}
#button-next-text {
text-align:center;
padding: 0px 5px 0 5px;
float:left;
height: 47px;
background-image: url('img/button-next-bg.jpg');
background-repeat: repeat;
background-color: #f5f5f5;
}

<<XHTML>>

<div id="button-next">
<div id="button-next-left">
</div>
<div id="button-next-text">
<a href="can-you-help-me.php" class="button-next-link">Can you help me?</a></div>
<div id="button-next-right">
<img src="img/button-next-right.jpg" border="0" />
</div>
</div>

Thanks!!

**boogyman** · 03-18-2008, 01:37 PM

welcome to the dd forums, please review our posting policies and regulations http://dynamicdrive.com/forums/showthread.php?t=24866

by default the width of any element is the width of the amount of information contained within... now, it appears that you want to have some image be as wide as the content within?

if you have a solid "rectangle" like image you can repeat it along the X-axis, however if your images have some special effect like rounded corners to make it appear like a button, you need some extra CSS.

it really depends on what you want to use it for, because looking at your code, this might be something that you should handle with a form input-button field

**Medyman** · 03-18-2008, 01:44 PM

Is this what you're looking for?

Code:

<html>
<head>
<style type="text/css">

a.boldbuttons{
display: block;

font: bold 13px Arial; 
line-height: 22px; 
height: 30px; 
text-decoration: none;
}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; 
}

a:hover.boldbuttons {
	color:black;
}

a.boldbuttons span{
background: red;
padding:5px;
}

.buttonwrapper{ 
overflow: hidden; 
margin:10px;
text-align:center;
}

</style>

</head>
<body>


<div class="buttonwrapper">
<a class="boldbuttons" href="#"><span>Help Me!</span></a>
</div>

<div class="buttonwrapper">
<a class="boldbuttons" href="#"><span>Really Really Really Really Long Text</span></a>
</div>

</body>
</html>

**pedroamorim** · 03-18-2008, 02:01 PM

Thanks for your answers guys. In fact i'm trying to have some round corners, that's why I'm using image bg. To understand better what I'm working on i took a shot of the button. By the way the button-next container is inside another two containers. The basic structure of the page would be something like:

<div id=todo>
<div id=nav></div>
<div id=content>
<p class=blerg>text</p>
<div id=button-next></div>
</div>
</div>

Thanks again guys for the quick answer!!

**Medyman** · 03-18-2008, 03:43 PM

Ahhh I see...

Have you looked at this:
http://www.dynamicdrive.com/style/cs...d_css_buttons/

It's the same technique, but you would need to add some padding to right of your text to fully display the arrow on the left side.

The markup will be almost identical to my post above, just a matter of adding some padding and swapping out the images.

Let us know if you have any problems implementing this.

**pedroamorim** · 03-18-2008, 04:46 PM

Nice one mate! Thank you very much for this.
By the way, these forums rock!

cheers...

**boogyman** · 03-18-2008, 05:53 PM

please don't forget to review the posting policies in the link in my first post...

it's a lot easier for us to look at computer code when it has the proper formatting... eg MedyMan's post has coding format tags

Thread: Problem with centering div tags.. help please!

Thread Tools

Search Thread

Problem with centering div tags.. help please!

Bookmarks

Bookmarks

Posting Permissions