Passing a calc from PHP to HTML

nfzgrld

Here's the problem: I want to put a div element that is 400px wide inside a parent div and I want it to be centered. How do I do it? I've tried everything I could think of using HTML. I'm assuming I'll have to do a PHP calc and pass it into the div, but I'm not sure how to do it.

Nick

nemonoman

<div style='text-align:center'><div style='width:400px'>
Your content here:
</div></div>

if you've got a div parent that isn't centered:

<div style='text-align:right'>Some right-justified stuff
<div style='text-align:center'><div style='width:400px'>
Your centered content here:
</div></div>
More right justified stuff.

</div>

nfzgrld

Yes, you would think that would work. At least I would think that would work as it makes sense. Unfortunatly, that doesn't work. One thing to consider is that this, and a couple of other instances where this is happening, all involve forms. I've tried embedding the style info in the form tags but that hasn't worked either. In fact, if I set the parent div to text-align:center everything goes to the center except this one thing. It's driving me nuts!

Nick

nemonoman

I tested my code before I posted, and what I posted "worked", i.e., it centered a 400px line.

Instead, why don't you post your non-working code.

nfzgrld

Ok, I'm sure your code does work. I've done this else where and it's worked fine as well. Here is the code that's not working:

Parent div:

<div class="right">
<?php include("includes/$index"); ?>
</div>

Here is the include where we have the problem:

<div style="position:relative;text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div style="padding-top:5px;height:22px;width:300px;position:relative;vertical-align:middle;text-align:left;padding-left:3px;font-size:small;font-weight:bold;border-left:1px solid #afafaf;border-top:1px solid #afafaf;border-bottom:1px solid #afafaf;float:left">Axel Search 1.7.0 Commercial License.</div>
<div style="padding-top:5px;height:22px;width:60px;position:relative;vertical-align:middle;text-align:center;font-size:small;font-weight:bold;border-left:1px solid #afafaf;border-top:1px solid #afafaf;border-bottom:1px solid #afafaf;float:left">$69.95</div>
<div style="padding-top:2px;height:25px;width:75px;position:relative;text-align:center;font-size:small;font-weight:bold;border-left:1px solid #afafaf;border-top:1px solid #afafaf;border-right:1px solid #afafaf;border-bottom:1px solid #afafaf;float:left">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but23.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
</div>
</form>
</div>

With this code everything inside that first div inside the include is pinned to the left of the parent div. The only way I've been able to move it is with a margin or padding statement, but there's no way to put that up accuratly without knowing the current width of the parent div on any given screen.

Nick

nemonoman

To the top line of the include where you say:
<div style="text-align:center">

Try:
<div style="width:400px;text-align:center">

Is this what you're trying to achieve??

I can't tell what you hope to have happen from your code as shown.

You might try doing this in a table??

nfzgrld

I know what you thinking with that, but for some reason it doesn't work in this instance. The idea is to let that div take up the whole width of the parent, then center the other stuff inside of it. Unfortunatly, that doesn't seem to work. Even with that thing at 100% everything still gets pinned to the left. I might end up having to use a table to do it, but I'd like to avoid that if possible. At this point though, I don't see how I can avoid it. There goes my XHTML 1.0 Strict validation.

Nick

nfzgrld

Well, for some reason I just wasn't able to get the thing to center, even using a table. Heck, I even tried <center> tags and they didn't work. So I ended up compromising and I think it worked out ok. Check it out at http://www.axelis.com.

Nick