div css

center the div object but align the text to the left.

Page 1 of 1

5 Replies - 1134 Views - Last Post: 22 April 2009 - 10:14 PM

#1 GenDeathRaiser  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 01-April 09

div css

Posted 22 April 2009 - 03:39 AM

I have my site, and I have 800px of content in the middle.

I want to make a div that is 800px wide, but those 800 pixels are in the middle, so when I type text into that div its aligned to the left, of the 800px block thats centered on the screen.

I can't figure out how to move the div to the center of the screen but keep the text aligned to the left!

Any insight or help would be greatly appreciated, thanks.

.headcontent {
  color: #191970;
  font-family: arial;
  font-size: 10pt;
  font-weight: bold;
  position: relative;
  width: 800px;
  height: 25;
  top: 4;
  text-align: center;
  z-index: 1;
}



Is This A Good Question/Topic? 0
  • +

Replies To: div css

#2 Astano  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 09-July 07

Re: div css

Posted 22 April 2009 - 04:15 AM

add the css:

margin:0 auto;



This should center the div in all but IE. To center in IE as well add the following to your CSS:

body {
	text-align: center;
}


This post has been edited by Astano: 22 April 2009 - 04:25 AM

Was This Post Helpful? 0
  • +
  • -

#3 GenDeathRaiser  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 01-April 09

Re: div css

Posted 22 April 2009 - 02:04 PM

View PostAstano, on 22 Apr, 2009 - 03:15 AM, said:

add the css:

margin:0 auto;



This should center the div in all but IE. To center in IE as well add the following to your CSS:

body {
	text-align: center;
}




I don't know if this is exactly what I'm looking for.

For the following - will act as spaces

I have a page this big at 100% ----------------------
I would like to make a div that is 800 pixels and put it in the center of the screen, then fill the content with text thats aligned to the left of it.
Right now I get -------Text-------
I want it to be ---Text------------

but it needs to be dynamic and not just a Left:100 because the page could be any size in someones browser, i just only want the middle 800 to be content, but the content in that middle div to be aligned to the left of the div

for instance with a table it would be like <table align=center><tr><td width=100%></td><td width=800>Text</td><td width=100%>
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: div css

Posted 22 April 2009 - 03:52 PM

What you're looking for is 'liquid' site. One that, well, basically fills the screen no matter the size.

You set your width of the container to let's say 90%, because your screen already has a width:

So you have this HTML markup:


<div id="wrapper">
   <h1>Hello World</h1>	   
	<p>Hello</p>
</div>



So we have a wrapper at 800px, to set in the middle, and all text tags have an automatic 100% setting unless you set a width.

SO here is the css:


html {
  margin: 0;
  text-align: center;}

#wrapper {
   width: 800px;
   margin: 0 auto;
   text-align: center;}

#wrapper p {
	text-align: left;}



Was This Post Helpful? 1
  • +
  • -

#5 GenDeathRaiser  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 01-April 09

Re: div css

Posted 22 April 2009 - 07:32 PM

View Postgregwhitworth, on 22 Apr, 2009 - 02:52 PM, said:

What you're looking for is 'liquid' site. One that, well, basically fills the screen no matter the size.

You set your width of the container to let's say 90%, because your screen already has a width:

So you have this HTML markup:


<div id="wrapper">
   <h1>Hello World</h1>	   
	<p>Hello</p>
</div>



So we have a wrapper at 800px, to set in the middle, and all text tags have an automatic 100% setting unless you set a width.

SO here is the css:


html {
  margin: 0;
  text-align: center;}

#wrapper {
   width: 800px;
   margin: 0 auto;
   text-align: center;}

#wrapper p {
	text-align: left;}





Thank you so much, this

#wrapper p {
	text-align: left;}


is exactly what I needed to see.
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: div css

Posted 22 April 2009 - 10:14 PM

Also - so you don't have to set each text element to text align, you do this:

<div id="wrapper">
   <div id="content">
	   <h1>Hello World</h1>	  
	   <p>Hello</p>
	</div>
</div>



#content {
	text-align: left;}

or 

#wrapper div {
	text-align: left}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1