Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering Web Pages 1

Status
Not open for further replies.
markknowsley

markknowsley

Programmer
Aug 30, 2005
152
GB
Please have a look at the following website:


Can someone explain how I can achieve the effect of centering my web form just like the content on this website. As the screen resolution gets smaller, the size of the border gets bigger but all the interactive stuff on the home page remains in the same position. I'm guessing it's something to do with the <DIV> tag but can anyone explain what?

Cheers,

Mark.
 
Sort by date Sort by votes
Div is usually a container one would put a website in, but it is not div that makes it centered, it is the styling applied to it. If you want to horizontally center a block level element you need to:
- give the element a fixed width and;
- set its left and right margins to [tt]auto[/tt]

An example of that might be:
Code: 
<div style="width: 100px; margin: 0 auto;">Centered</div>
 
Upvote 0 Downvote
Luzian, I have used this technique to center my elements for over a year now, never ever had a problem with any of the browsers not rendering it as expected. Granted, it does not work in IE5.5 and lower if you want to support those ancient browsers. Also does not work in IE6 without a proper doctype, if for some obscure reason you want to code pages in quirks mode. But I have never experienced it not working in FF. Can you give us an example of the code that is not working for you in FF?
 
Upvote 0 Downvote
Technically it does work. So far, I've proved it to work with text, but not with a table:
Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<title></title>
	</head>
	<body>
		<div style="width: 100px; margin: 0 auto;">
			<table style="border: solid 2px black; width: 500px">
				<tr>
					<td>
						<p>Lots of text..</p>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
 
Upvote 0 Downvote
What you've proved is that you can't fit a 500px wide table in a 100px wide container. You wouldn't complain about your SUV being in the middle of the road even though you tried parking it in the tiny tool shed (which itself is entirely on your front yard).

Try it with adding margin declaration to the table itself.
Code: 
            <table style="border: solid 2px black; width: 500px; margin: 0 auto;">
                <tr>
                    <td>
                        <p>Lots of text..</p>
                    </td>
                </tr>
            </table>
 
Upvote 0 Downvote
Thanx, that works. table's width 100%, div's width fixed at 500px.
 
Upvote 0 Downvote
Here's what I've done:

<div style="height: 100px; margin: 0px auto; text-align: left; padding: 15px; background-color: #FFFFFF; width: 900px; border-style:solid; border-color: Red;"></div>

This creates an area right in the middle of the browser just as I wanted.

My next question, then, is what is the best way to lay out web controls, images etc. inside this div? I've been trying to get things to center and can't get it to work. Should I be using tables within the DIV to get things to center. What about divs within divs - my attempts at this have just chucked the controls all over the place.

Thanks,

Mark.
 
Upvote 0 Downvote
It is best to start a new thread with new questions.

I would say just place the elements inside this div the way they semantically fit -- if it is titles, use h*, if it is text, use p and so on. If you let us know what exactly you want we will be able to help you in more detail.

On your apparent question: Your div will be centered. To center elements inside this div, you need to:

- again apply auto left and right margins on block level elements that are smaller in width than their parent container;
- add [tt]text-align: center;[/tt] for all the inline elements such as spans, text, img, inputs, labels and similar.
 
Upvote 0 Downvote
What do you class as 'block level elements' - divs, tables etc?
 
Upvote 0 Downvote
Block level element is an element that occupies its own line rather than just mark the text in an actual line. Block level elements are divs, tables, forms, paragraphs, headings, lists, to mention just a few most popular ones.
 
Upvote 0 Downvote
OK, next question:

If I want to make all my tables automatically have the left and right margin values set to 'auto', I can write something like this in the <style> tag:

#TableStyle
{
margin-right: auto;
margin-left: auto;
}

but how do I get each new table that I create to accept these values?

I've tried setting <table id="TableStyle"> which works but I can only have one table with that ID and I'd have to declare a new set of parameters in the <style> tag for each new table.

I also tried <table class="TableStyle"> but that didn't work. Any ideas?
 
Upvote 0 Downvote
If you were to put that style that you have in the div into a separate stylesheet and apply an id to the div, your job would be easy. Here's a list of things you can do:

1. instead of #TableStyle use [tt]table[/tt]. All your tables will thus have that style.
2. instead of #TableStyle use [tt].TableStyle[/tt]. That way you will be able to use the class for the table which you would instantiate the same way as your last example.
3. give your div an id of container (div id="container") and then use [tt]#container table[/tt]. This, IMHO best, solution will make all tables within the container div follow that style.

These are the most common approaches you can take. Whichever you choose is up to you, they only differ in code cleanliness (the second is dirtier) and code versatility (third one would be the most versatile). But you know which solution would work best for you.
 
Upvote 0 Downvote
This stuff is amazing. I've been using the designer in Visual Studio 2005 to lay out stuff on web pages but the contractor who sits opposite advised me to start typing out the asp rather than relying on the drag and drop stuff - the results are a million times better.

Thanks very much for your help so far, Vragabond.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MitGandhi
  • Locked
  • Question
WebGL Error
Replies
3
Views
355
spamjim
spamjim
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
68
tyutghf
tyutghf
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
164
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
136
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
91
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top