March 17, 201016 yr I want to create a simple box to hold some text. I want the box itself to be a certain width with a border and padding. The text in the box should be left-justified. But I'd like the box itself to be centered within the area it occupies. The only thing I can figure to do is something like this: <div align="center"> <div style="width: 500px; padding: 15; border: 1px solid black;text-align: left"> here's the text I want in the box. </div> </div> Is there a way to do this without having to embed a div inside another div?
March 17, 201016 yr Quite an easy bit of code mate: <div id="container"> <div id="box"> here's the text I want in the box. </div> <!-- END BOX --> </div> <!-- END CONTAINER --> and then for your CSS: body { text-align:center; } #container { width:800px; /* specify your width here */ margin:0 auto; } #box { width:200px; height:200px; text-align:left; } Try to keep your html and css in separate files
March 17, 201016 yr In answer to your question, you don't have to put another div inside the container div if what you need can just be done with h1, h2, p, img tags etc. which can also be left-aligned within the the container. Nothing wrong with nesting a div inside if the layout requires it though. Hope this helps?
March 19, 201016 yr Author Well, it sounds like the answer to my question, "Is there a way to do this without having to embed a div inside another div?" ...is 'no'. So at least I know that, and I appreciate the help. (I only wish that reply notifications were reaching my email box.)
March 19, 201016 yr Well, it sounds like the answer to my question, "Is there a way to do this without having to embed a div inside another div?" ...is 'no'. So at least I know that, and I appreciate the help. (I only wish that reply notifications were reaching my email box.) Well, like I said, you don't need another div unless you want the content to be contained within its own separate box within the main container (which would centered).
March 19, 201016 yr Author I only care about the look. So within the main page, I want a box that's considerably smaller than the general content with a border around it. The box must be centered, and the contents must be left justified.
March 19, 201016 yr to clarify further: html: <div id="centered"> <!--Any content can go in here including <p> <h2> and <div> and will be left-aligned--> </div> CSS: #centered { width: 800px; margin: 0 auto; padding: 10px; }
March 19, 201016 yr the margin: auto; part of it. It means that margin on either side of the div should be equal, therefore forcing it to be centred.
March 19, 201016 yr Author Well, here's my page. The box is definitely not centered. Can you tell me where I'm going wrong? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> #centered { width: 400px; margin: 0 auto; padding: 10px; border: 1 solid black; } </style> </head> <body> <div id="centered"> testing... </div> </body> </html>
March 19, 201016 yr It is centered in Firefox but not in IE because you have an incomplete doctype.It should be <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> from here;- http://www.w3.org/QA/2002/04/valid-dtd-list.html The border did show in IE when it was not centered but doesn't show now in IE or Firefox because the border size should be 1px not just 1. The correct doctype requires px after a size.
March 19, 201016 yr Author Hmm... Well, thanks for the info. I think I'll stick with the nested divs, because altering the doctype breaks much of my existing code. In that specific example, the border is missing.
March 19, 201016 yr No!! Get it right with a correct doctype!! The border will show if you add px after 1
March 19, 201016 yr Author I'm afraid I need more help. After converting the doctype, my table cells are inheriting the centering from the divs. It's fine in Firefox, but not MSIE. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div align="center"> <p>I want everything on this page centered.</p> <table cellspacing="0" cellpadding="0" border="1"> <tr><td>but not the text</td></tr> <tr><td>in</td></tr> <tr><td>these</td></tr> <tr><td>cells</td></tr> </table> </div> </body> </html>
March 19, 201016 yr align="center" is old-fashioned code, I would delete it. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> #centered { width: 400px; margin: 0 auto; padding: 10px; border: 1px solid black; } #centered p { text-align: center; } </style> </head> <body> <div id="centered"> <p>I want everything on this page centered.</p> <table cellspacing="0" cellpadding="0" border="1"> <tr><td>but not the text</td></tr> <tr><td>in</td></tr> <tr><td>these</td></tr> <tr><td>cells</td></tr> </table> </div> </body> </html> For a div, use a style width: 400px; margin: 0 auto; like you had before for the div #centered which will center the div container in its parent or body. The table cells are now default left-aligned because no style applies to them except the cellspacing, cellpadding and border. Use text-align: center; for text in a p tag #centered p { text-align: center; }
March 22, 201016 yr Author Thanks, but that's not really what I had in mind. What I need is to have the top text and the table to be centered, and the text in the table cells to be left-justified. I copied your code, and an enclosing box has been place on the page. The box is centered on the page, and the text is centered in the box, but the table is left-justified within the box, putting it off-center overall.
March 22, 201016 yr Try this:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> #centered { width: 400px; margin: 0 auto; padding: 10px; border: 1px solid black; } #centered p { text-align: center; } table { /*width : 200px;*/ margin: 0 auto; } </style> </head> <body> <div id="centered"> <p>I want everything on this page centered.</p> <table cellspacing="0" cellpadding="0" border="1"> <tr><td>but not the text</td></tr> <tr><td>in</td></tr> <tr><td>these</td></tr> <tr><td>cells</td></tr> </table> </div> </body> </html> It's the same code as I had before with the addition of this style:- table { /*width : 200px;*/ margin: 0 auto; } I put the width in comments because you don't need it, but it;s a good idea to give a width to a table or its td cells.
March 22, 201016 yr Author That looks better. Let me take some time and mentally absorb that. Thanks!
March 22, 201016 yr Author Do I lose anything by eliminating the div? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> #centered { text-align: center; } table { /*width : 200px;*/ margin: 0 auto; } </style> </head> <body> <p id="centered">I want everything on this page centered.</p> <table cellspacing="0" cellpadding="0" border="1"> <tr><td>but not the text</td></tr> <tr><td>in</td></tr> <tr><td>these</td></tr> <tr><td>cells</td></tr> </table> </body> </html>
March 22, 201016 yr As a general rule, a block element like a div or table needs a width and margin: auto to center in its parent. A p tag will be full width of its parent by default so to center the text inside it, use text-align: center; Do I lose anything by eliminating the div? You lose the border around the text and table.
March 22, 201016 yr Author You lose the border around the text and table. Well, I know how to handle that. Thanks again for the help!
Create an account or sign in to comment