Center a row of divs with sentences

I noticed your floating them to the left this means they wont be centered unless you add a margin or padding.

If this doesn't work just add:

align="center"

If this works then you will have to remove your align center and change the margin-left and margin-right to auto.

Also you have 2 html errors to do with your doctype you might want to sort those out.

What Doctype? it's worth checking these things!

Kurson you need to place a dtd on your pages other wise you will have significant problems, for the low down on doctypes have a hunt around the forum for posts on the subject.

RE:

I know this is off the original topic. But This is what you're referring to, correct?

Note: This is added by Dreamweaver when I first develop a page.

I have no idea what it is. What should I be doing?

Could you please cut and paste a correct example with an explanation for why I should be writing it that way.

Most appreciated.

Hi Josh.

I thought all I need to do is add:

margin: 0 auto;
Auto taking care of the sides and supposedly centering the divs within the wrap div. Nadda.

I tried align="center" in the wrap div...didn't work.

Hi Josh...

A follow-up

http://www.jadspecialty.com/css_test2.html

This is my new attempt.

This is the CSS:

#wrap1{
/*text-align: center; */
vertical-align: middle;
margin: 20px auto 20px;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;

}

.contact_info{
border: 1px solid green;
display: inline;
/*float: left;*/
width: 200px;
margin: 0 auto;

}

And the front end:

NOTE: it looks right in IE6.

HOWEVER: In Firefox my width for the address boxes divs are ignored.

In Firefox instead of being width: 200px, the div expands out. Awful

Why?

Thank you in advance everyone for helping me address this issue.

I will have a play in a second on my computer. Theres a few things I can see going wrong.

And this is just a thought try changing your margins as so:

margin-left: auto;
margin-right: auto;

You could also try the min-width and the min-height comands to see if this forces it to the right height.

As I say I will have a play with it in a second.

Actually I'm afraid this is very much on topic; a DTD is fundamental to how your page is displayed, without one you render in quirks mode allowing browsers to place their own interpretation on your properties, this is especially significant in the IE family of browsers. Without this element defined for a page the asking of questions pertaining to correcting issues is to a large extent pointless, browsers must all render in Standards mode providing a level playing field that we know handles certain aspects the same across browsers.

The element you have mentioned is not a DTD that is a character set declaration a whole different thing (please be cautious about letting apps automatically place elements on the page unless you know what they are and the reason for them, google meta character sets.)

I had hoped that you might have noticed the link in my sig line which links to an article on Doctypes or that you had perhaps had a hunt around the forum in areas such as 'How To' section where we keep a few more detailed posts on various subjects to help people.

I would rather not cut and paste an example at this stage as this is the easy way out please do some investigation yourself first, then when and if you have further questions I or any of the other older hands will be glad to explain further.

Ok I solved the problem on FF I haven't checked any other browsers YET

CSS:

.text_white {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}
.text_white_bold {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_white_14 {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_white_18 {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_header {
	font-family: Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_table_header {
	font-family: Arial;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #000099;
}
 
 
.text_table_cell1 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #CCFFFF;
}
.text_table_cell2 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFFF;
}
 
.table_cell_FFFFCC {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFCC;
}
 
.table_cell_E8F1F7 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #E8F1F7;
}
 
.table_cell_BDE3F2 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #BDE3F2;
}
 
.text_phone_navy {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #000099;
}
 
.text_title_navy {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000099;
}
 
.text_title_blue {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #0000FF;
}
 
 
 
 
 
 
 
.wrap {
	margin:0px auto;
	padding:0;
	width:100%;
 
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
 
 
#wrap1{
	/*text-align: center; */
	vertical-align: middle; 
	margin-left: auto;
        margin-right: auto;
	border: 5px solid red;
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
float: none;
margin: 0 auto;
padding-left: 28%;
 
	}
 
.contact_info{
	border: 1px solid green;
	width: 200px;
	margin: 0 auto;
display: horizontal;
float: left;
	}
 
 
.table_structure1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFFF;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-color: #33CCFF;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #33CCFF;
 
}
 
 
 
.table_structure_E8F1F7 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #E8F1F7;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-color: #33CCFF;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #33CCFF;
 
}
 
a.main:link {color: #00FFFF; text-decoration: underline; }
a.main:visited {color: #00FFFF; text-decoration: underline; }
a.main:hover {color: #FFFFCC; text-decoration: underline; }
a.main:active {color: #FFFFCC; text-decoration: underline;} 
 
a.tablelink1:link {color: #0000ff; text-decoration: underline;}
a.tablelink1:visited {color: #0000ff;  text-decoration: underline;}
a.tablelink1:hover {color: #FF0000; text-decoration: underline;}
a.tablelink1:active {color: #FF0000; text-decoration: underline;} 
 
a:link {
	color: #00FFFF;
}
a:visited {
	color: #00FFFF;
}
a:hover {
	color: #FFFFCC;
}
a:active {
	color: #FFFFCC;
}

Well then I would check in those other browsers Josh.

We need to halt proceedings here and both parties must address the issue of doc type switching.

@Kurson the reason that your width:200px wouldn't work was that you had told that element to behave as an 'inline' one inline elements do not honour widths.

Centering elements with auto margins is an issue if you have no DTD due to IE rendering in quirks mode where it doesn't understand margin:auto; value.

Attributes such as align are generally frowned upon and deprecated in strict DTD's please don't get in the habit of using them.

Those style rules shown have a few issues to deal with but please sort the DTD out first and then they can be addressed.

No I'm stuck at my Dads house at the moment so I will do it when I get home.

Hu Hugo.

kay, so I weent to the link. I cut and paste in every single doctype.

All of them made my layout worse in IE6.

Without a DOCTYPE.. width: 200px; works in IE6 and is ignored in Firefox.

When I include any of the reccomended DOCTYPES on that page you referred to me, it width: 200px; is ignored in all browsers.

I appreciate your continued replies, but really, please, if you know the anwser to this mystery I'd appreciate it if would not be coy and jut cut and paste in the answer for me to test.

Thank you.

Hu Hugo.

kay, so I weent to the link. I cut and paste in every single doctype.

All of them made my layout worse in IE6.

Without a DOCTYPE.. width: 200px; works in IE6 and is ignored in Firefox.

When I include any of the reccomended DOCTYPES on that page you referred to me, it width: 200px; is ignored in all browsers.

I appreciate your continued replies, but really, please, if you know the anwser to this mystery I'd appreciate it if would not be coy and jut cut and paste in the answer for me to test.

Thank you.

Hi:

margin-left: auto;
margin-right: auto;

This doesn't work when added to #wrap1 for css_test1.html. neither did adding min-height: 150px; for .contact_info.

Hi.

Thank you for the continued support.

So I cut and paste you code in for:

#wrap1{
/*text-align: center; */
vertical-align: middle;
margin-left: auto;
margin-right: auto;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
float: none;
margin: 0 auto;
padding-left: 28%;

}

.contact_info{
border: 1px solid green;
width: 200px;
margin: 0 auto;
display: horizontal;
float: left;
}

Two issues.

1. RE: padding-left: 28%;

This seems like a patch more than a resolution.Yes, it's more centered BUT it is off center.

I'm looking to evenly balance out the left and right sides and literally center the object.

The results of padding-left: 28%; is less than desireable at:

http://www.jadspecialty.com/css_test3.html\

2. The Contact Divs are wrapped with the wrap gifs yet are not constrained within the Wrap div, they instead float beyond the bottom margin.

Very frustrating.

All I want to do is forgo using a table with two cells centered.

Isn't there a simple, industry standard way of doing this?

Kurson I keep seeing table layouts, if you wish this resolved please produce a basic tableless layout with a overall wrapper to hold all elements and everything else nested within; all text correctly described within paragraph tags, all tags removed, document complete with all proscribed elements i.e DTD then we can help you with what is a very simple problem and to which the centering aspect has been addressed earlier i believe, but regardless produce a basic semantic layout and we'll then help you with requirements.

Hi Kurson,

First off you need to give your file a document type. For beginners I always recommend the below, copy and insert this at the very top of your file, directly before the opening tag.

Why do I recommend this document type, because its is more forgiving than a strict one. Once you have the hang of html then moving to a strict doctype is a less frustrating experience. The loose document type will allow you more flexibility if you are still learning html.

Next amend your 'wrap1' and 'contact_info' css to as below:

#wrap1{
width: 400px;
margin: 0 auto;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.contact_info{
float: left;
width: 200px;
color: #fff;
text-align: center;
}

Thats should get you to where you want to go, or at least nearer. YOU MUST include the document type as mentioned above for this to work