If you use fluid widths instead of fixed widths, your page will generally adjust. That means avoiding fixed pixel widths. The width could be 100%, 90%, or whatever (as long as it's not greater than 100%). :)

If the width is set at 100%, will the content go all the way to the edge on the left and right sides of a page on the different types of devices?

It should, unless it's zoomed in or out.

If the width is set at 100% and zoomed in, could that create horizontal scrolling?

Should I set the width at perhaps 90% so even if there is zooming in, there is no horizontal scrolling?

I appreciate your help.

If your container div is set to 100% and you have other containers within that are set to pixel widths, you can end up with a horizontal scrollbar. An example would be a table layout with a column having a pixel width setting inside the parent 100% div tag that contains the page.

Width in percentages has nothing to do with it. Well, almost nothing: If you use negative percentages in the right places, you can ensure that a site will always have a horizontal scroll. (I've achieved this by accident in ebooks :()

A horizontal scroll bar means that the the site wasn't designed to be responsive (magic word that you should memorize). That's the shortest possible answer. There are long threads about responsive design. Then you start getting into questions of whether the problem is that the site author doesn't know (as in your case) or that the author doesn't care.

Thanks for the responses.

I also want to have a little spacing on the left and right sides of the page, so can you please tell me if I would have to center the <div> in addition to setting its width to 90%?

margin: 0 auto;

will center it.

For some reason, I think that margin: 0 auto does not always work.

Maybe there needs to be some other things included with this for it to work. Do I need to put anything more? Other elements, etc.

Also, if I can't center with margin: 0 auto, can I possibly do width=80% text-align=center with a <div>?

I appreciate your help.

margin: 0 auto didn't work in older versions of IE, and there was a bug in IE8 standards mode that caused it not to work either. If you don't need to support those obsolete browsers, margin: 0 auto should work fine.

Some have worked with max-width to ensure no horizontal scroll. I don't use that myself, but might be something to look into. As others have noted, fluid, responsive design doesn't really care about the actual browser window size or the resolution.

Also, if I can't center with margin: 0 auto, can I possibly do width=80% text-align=center with a <div>?

Is this a html 4 document? Then you don't want margin: 0 auto; that wouldn't work. Are you adding style to the elements inline or in a stylesheet? I ask because text-align=center is not valid inline syntax and the = makes me think your page might be html4. To give proper help, it would help to know the document type - what's up on the first line of the page, that is what tells the browser how to handle elements and how to add styles.

Thank you for the responses, everyone.

tangor,

Should I set the max-width to 100% or should I use a lower percentage?

not2easy,

I apologize, I meant to say text-align:center. Also, for width, I meant width:80%. I may add the elements inline or in a stylesheet. The Doctype is html. Is margin: 0 auto something that is a part of HTML 5 and not HTML 4?

If I were using HTML 4 and I cannot use margin: 0 auto, can you tell me what I should do?

Would using width:80% and text-align:center with a <div> be a possibility?

Would using width:80% and text-align:center with a <div> be a possibility?

text-align:center would align the contents of the div in the center so IF this is the div that contains the contents of the page, then it could align the page in the center, but every element inside the center aligned div would need to be text-aligned left or right if the entire page's contents were not wanted to display as centered.

The Doctype is html

That is used for html5 which should handle margin: 0 auto; just fine, but as in any doctype, if there are any other errors on the page it will throw some browsers into Quirks Mode, then things get out of hand and browsers handle things in different ways (especially IE's older versions). A piece of older code pasted into a new document is an example, such as a table with a border style inline or cellpadding, that is deprecated and means things don't behave as you wanted. A tag like <center> or <font> doesn't belong in html5.

Thank you for both of these explanations.

What you mention about text-aligned left or right is something that I was thinking about, but with what you have written, I now know what I have to do if I center a <div>.

not2easy,

I think that I might have to use margin: 0 auto or margin-left:10% and margin-right:10% (just an example) because I want there to be spacing on the left and right sides of the page and by using text-align:center, I think that will center the contents in the <div>, but it will not center the <div>.

Do you think I need to use margin: 0 auto or margin-left:10% and margin-right:10% with a <div> for the spacing on the left and right sides of the page and text-align:left with the elements (e.g., <p>, <h1>) in the <div> so the content in the different elements is not centered within the <div>?

I appreciate your help.

Take a look at this [bluerobot.com...] and view page source for the code. The IE browsers which don't support it are reduced to IE5 ... and who's using that these days?

Thank you tangor, that site said it more clearly than my effort above.

@gouri, have you tried viewing your work as you go? Some text editors let you preview your work or if the file is in a folder on your computer you can open the file with a browser to see if you like a change and see if it does what you want. When you are happy with results, then look at uploading and checking it online and trying other browsers.

To answer your question about
margin-left: 10%;margin-right: 10%;
it is slightly more tricky that way because if you are setting 80% width for the page container div and then set margins as % numbers you need to be certain not to have a width settings higher up like
body {margin: 2px; padding: 4px; }
because then you don't have 100% remaining to work with. The margin: 0 auto; is a shortened way of telling the browser to give the div 0px margin top and bottom and automatically split any leftover space evenly to the left and right. So for a div set for 80% width it would be aligned in the middle of the page if no other setting or error prevents that. The example tangor links to covers it all clearly.

@tangor,

Thank you for the link. That is helpful.

@not2easy,

Thank you for the explanation. What you mentioned are things that I have to keep in mind.

Would I be able to use margin: 0 auto with the <body> element instead of with a <div> because I want all the content on the page to have the empty space on the left and right sides, and I think that using margin: 0 auto with the <body> element would accomplish that?

Thanks.

You could... but I personally like to keep body neat and clean as it is the ultimate container for the page. Anything inside body is content of some kind... and I'd rather have control of the content at smaller levels.

Whatever your choice, just be consistent! Make some decisions on how you will code now AND in the future so that mistakes are not made because you change horses mid-stream some where down the line.

I agree with not setting margins in the body, that means the body width is smaller than the screen and it could be hard to control the appearance of areas outside the body. I've never tried it to see what it looks like. Best to stick with common settings at least while you are still learning the how to's of css.

it could be hard to control the appearance of areas outside the body

That's assuming you have areas outside of-- that is, left or right of-- the body. I've always done something like

body {margin: 1em 8%;}

with the exact side margin depending on type of page. And then in the @rules for smaller devices the margin gets progressively smaller. It's about overall look: if an ordinary desktop browser window gets wider or narrower, I want a consistent proportion of empty space. Ten years down the line I'll probably be able to use a calculated value, where the percentage is directly determined by device width, like
(maxwidth/200)%

Thank you all for the advice. Some good advice on consistency and going with the norm when learning CSS. I was thinking of going with something similar to what lucy24 mentioned but now I am thinking that it might be good to go with setting the margins of the <div>.