HTML Forum

**allmanm** · 10-22-2005, 12:10 PM

I would like to arrange short strings of text running down my web page,
to the left and right of the center line running from top to bottom,
I have defined in the style tag TEXT-ALIGN: center, how do I specify in my <div> tags that I want the text to appear a certain number of pixels to the left or right of the vertical centre line? If the text overlaps thats fine and I would like the effect to remain consistent irrespective of browser or screen size.

center
a specified dist to the left of centr
a specified dist to the right of centre

<html>
<head>
<style type="text/css">
#start {TEXT-ALIGN: center}

</style>
</head>
<body>
<div ID = "start"><h1>1st element centered</h1></div>
<div ID = "start"><h1>I would like this to appear a specified dist to the left </h1></div>
<div ID = "start"><h1>I would like this to appear a specified dist to the right</h1></div>
</div>
</body>
</html>

Thanks for any help

**chrishirst** · 10-22-2005, 02:19 PM

First off;
You cannot have multiple elements with the same ID, if they are to have the same CSS properties use a class instead.
<hn> elements are block elements so do not need to be wrapped in an enclosing div.
Use padding to push your text from the right or left borders of the element. A header <h> as a block element will be 100% of the parent container.

Code:

<html>
<head>
<style type="text/css">
h1 {
  position:relative;
}
#hdr_ctr {
   text-align:center;
}
#hdr_lft {
  text-align:left;
  padding:0px 0px 0px 20px;
}
#hdr_lft {
  text-align:right;
  padding:0px 20px 0px 0px;
}

</style>
</head>
<body>
<h1 id="hdr_ctr">1st element centered</h1>
<h1 id=hdr_lft">I would like this to appear a specified dist to the left </h1>
<h1 id=hdr_rht">I would like this to appear a specified dist to the right</h1>
</body>
</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!