Center Within Div Issue

silverskymedia · 01-17-2008, 04:34 AM

Hello, I am having quite the brainfart trying to center some text. I've tried using a <div> and a <p>.

Any help would be appreciated.

http://silverskymedia.no-ip.com/portfolio/

Thanks.

rmedek · 01-17-2008, 05:55 AM

If you align the text to the right, you'll see where the problem is. The text on top of the centered text (your Constant Contact email form) is being positioned relatively, with a negative top value, to bring it up into the breadcrumb area. But positioning it relatively still reserves the space—for lack of a better term—so even though it's displayed out of the way it's still taking up space where it would normally be, preventing the text from being centered. Make sense?

Changing this:

Code:

<div style="float: right; position: relative; top: -27px; left: -30px;">

…to this:

Code:

<div style="float: right; margin: -27px 0 0 -30px;">

…should fix it. Hope that helps…

Excavator · 01-17-2008, 06:11 AM

Hello silverskymedia,
This works -

Code:

h1.menu {
 color:#ffcc66;
 text-align:center;
 border-bottom:1px solid #fff;
 font-size:2.4em;
 padding-left:10px;
 letter-spacing:.5em
}
h2 {
text-align: center;
}h3 {
 font-size:1.4em;
 color:#000
}
.slogan {

and

Code:

<div id="rightcolumn">
<div id="breadcrumb">
  <p>
    <a href="/" style="text-decoration: none;">Home</a> | &nbsp;Portfolio
  </p>
  <div style="float: right; position: relative; top: -27px; left: -30px;">
  <!-- BEGIN: Constant Contact HTML for Send Page to Friend  -->
  <div style="float: left; position: relative; top: 7px;"><img src="/images/Email.gif" border="none"></div>&nbsp;<a href="/share/default.asp?url=http://silverskymedia.no-ip.com/portfolio/Default.asp?" class="sendToFriend">Send page to a friend</a>
  <!-- END: Constant Contact HTML for Send Page to Friend  -->
</div>
</div>


    <h2>This should be centered, but it's not!!!</h2>


<!-- End Right Column -->

<div class="clear"></div>
</div>

I only used h2 because it's not a paragraph...

Plenty of things to fix if you look at that in the validator!!

silverskymedia · 01-17-2008, 06:31 AM

Wow, thanks for the responses. rmedek, you were right. using the float did the trick. Thanks for the help and I hope I can remember this in the future.

rmedek · 01-17-2008, 06:35 AM

No problem, but note it wasn't the float, it was the negative margins versus relative positioning.

silverskymedia · 01-17-2008, 05:36 PM

OK, I'll note that.