I have a 20 inch monitor. When I am at some websites like msn.com I see all their elements grouped together at the center of my monitor screen with one inch of empty space on both the left and right side of my screen. How do I go about setting mine up like this? Do I use a nested hierarchy arrangement? Do I use absolute, relative or float. Do I use the <center> tag? I don't think the <center> tag is compatible with absolute positioning. Thanks for your advice.
The center tag is one way to center elements, but it is recommended that CSS be used in place of it due to the fact that the center tag is deprecated and CSS is considerably more friendly when it comes to alignment. Absolute and fixed elements are properly aligned with the left, top, right, and bottom properties. The text-align property can be used to center elements and the padding property can be used to add padding between elements.
Thanks for your reply. Let me explain this another way. I am trying to glue text (in rectangular borders), images, and form elements onto a piece of paper. Then I want this piece of paper to float or stay aligned in the center of my web browser, weather my monitor is 30 inches or 19 inches, it must stay in the horizontal center. What is the strategy?
I have been using CSS. I have multiple elements. I am trying to fix them at fixed distances to each other but as a whole I want all the elements to center horizontally into the browser. If I use margin: 0 auto; on each element in CSS wont each element overlap on top of each other at the center of the browser window?
Can't I set up a parent child relationship so the parent is aligned to the center of the browser window and the children are fixed to the parent? If so, how?
I believe you are correct, when the element is fixed that is. Mind providing us with a link to this site, an example or the source code so we can vision the specifics and what you currently have laid out?
Try placing your entire page inside a div and then centering that. You would have; <div id="wrapper"> Place all of your code in here. </div> Then use nhc1987's css to center the "wrapper" in your window.
I think this will work, assuming you want all of the elements centered down the middle of the page? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> <title>test</title> </head> <html> <body> <div id="wrapper"> <img id="imageblack" src="imageblack.jpg" /> <img id="imagewhite" src="imagewhite.jpg" /> <div id="blaa"> <a>blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa</a> </div><!-- end blaa --> <div id="form"> <form action="contact_action" method="post"> <lable>First Name: <input type="text" name="firstname" size="30"/></lable> </form> </div><!-- end wrapper --> </body> </html> #wrapper {width: 985px; height: 1200px; margin: 0 auto; background: rgb(175,175,175); text-align:center;} #imageblack {width: 400px; height: 600px; border: 5px solid black;} #imagewhite {width: 200px; height: 150px; border: 5px solid white; display:block; clear:both;} #blaa {width: 365px; height: 150px; text-align:left; margin-left: 10px; background: rgb(125,145,45); display:block; clear:both;} #form {width: 294px; height: 50px; clear:both;} There are still a few changes you could make, as I'm not entirely sure which way you want your page organised. If your images are the correct size you wont need to define heights and widths, and you can replace the image id's with one img tag in the css. You can possibly get rid of the wrapper height too, and just let the page assume the correct height for its content. I usually start with my html and no formatting, then add as little css as possible to get the look I want.
I thank you for the time and effort you are putting into this. I don't think I am communicating myself clearly enough. I attached an image of what yahoo.com looks like on my 20-inch monitor. This is what I am trying to achieve. (Sorry the image is so tiny. This site for some unknown reason won't let me attach a larger image.) All the elements at yahoo are grouped into squares next to each other side by side and vertically with 10 or 20 grey pixel gaps between them. Then on both the right and left side near the edge of my browser window, running vertically is 1-inch wide empty space. It is as though yahoo designed their site assuming the average user has a 19-inch monitor and for those of us with larger or wider monitors, yahoo insured their web page would load with all the elements grouped together at the center of the browser window. Msn.com, youtube and myspace each have 1-inch of space on both sides of their content showing on my monitor no different from yahoo.
Try these files out and see if they do the trick. It's not the best way to do things as the width is a fixed number of pixels, but I think it will look allright on your monitor. There is no height specified for the boxes, they should expand downwards in size as you add content. If you want to add or take away boxes then make sure you add another <div></div> within the left, center or right divisions. PM me if you need any more help. It won't look exactly like your picture until you add content to change the heights of your boxes, but it's a start. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> <title>Index</title> </head> <body> <div id="wrapper"> <div id="header"> <p>Header</p> </div> <div id="left"> <div id="left1"> <p>Left 1</p> </div> <div id="left2"> <p>Left 2</p> </div> </div> <div id="center"> <div id="center1"> <p>Center 1</p> </div> <div id="center2"> <p>Center 2</p> </div> <div id="center3"> <p>Center 3</p> </div> </div> <div id="right"> <div id="right1"> <p>Right 1</p> </div> <div id="right2"> <p>Right 2</p> </div> <div id="right3"> <p>Right 3</p> </div> </div> </div> </body> </html> stylesheet.css body {background:#b0b0b0;} p {font-family:Verdana, Arial, Helvetica, sans-serif; font-variant:small-caps;} div {border:1px solid #000000; background:#ffffff;} #wrapper {width: 1200px; margin: 0 auto; text-align:center; border:none; background:#b0b0b0;} #header {background:rgb(255,255,255); margin:5px;} #left {width:360px; float:left; border:none; background:#b0b0b0;} #left1 {margin:0px 5px 5px 5px;} #left2 {margin:5px;} #center {width:480px; float:left; border:none; background:#b0b0b0;} #center1 {margin:0px 5px 5px 0px;} #center2 {margin:0px 5px 5px 0px;} #center3 { margin:0px 5px 5px 0px;} #right {width:360px; float:right; border:none; background:#b0b0b0;} #right1 {margin:0px 5px 5px 0px;} #right2 {margin:0px 5px 5px 0px;} #right3 {margin:0px 5px 5px 0px;}
I thank you very much for the time your spending helping me. I created a page using your code and it looks great. I think what I am learning is that I cannot use absolute positioning to position elements in relation to each other and then expect all these elements as a group to float or center themselves to the center of the browser window. The two beginner books I was referring to did not go into thorough detail of how to overcome all the problems with the float technique. Just this morning before I received your reply, I bought "CSS The Missing Manual". I think this book and especially your suggestion should give the guidance I need. Thanks again.