CSS centering problems

I am studying CSS and Jquery. Here is my simple practice page.

[1]   First I want to center all four DIVS on the page.

[2]   Then I want to center the words, "box1", "box2", etc horizontally AND vertically within their parent DIV.

Can anyone show me how to do this?  Below is the code I have so far. I made SOME progress, but not my desired results.

Thanks!!

<!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" />
<title>jquery playground</title>

<style type="text/css">

.center
{
margin:auto;


}
#box1 {
	background-color: #FFC;
}
#box2 {
	background-color: #6F3;
}
#box3 {
	background-color: #F6F;
}
#box4 {
	background-color: #CF3;
}
.main-box {
	height: 300px;
	width: 200px;
	border: 1px solid #000;
	float: left;
	margin-left: 10px;
}

#discount-container {
	clear:both;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
</style>
</head>

<body>
<div class="center" id="wrapper">
	<div id="menu-box">
		<div class="main-box" id="box1">Box 1</div>
    	<div class="main-box" id="box2">Box 2</div>
    	<div class="main-box" id="box3">Box 3</div>
    	<div class="main-box" id="box4">Box 4</div>
        <div id="discount-container">Your Discount is:</div>
    </div>
</div>
<script src="jquery.js"></script>

<script>

$(function() {

	$(".main-box").click( function() {
		
		// Do something here
	
	});

});

</script>
</body>
</html>

Open in new window

LVL 1
edvinsonAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
This
.center
{
margin:auto;
}
does absolutely nothing
To center the boxes they must have a width and margin

#box1 {
      background-color: #FFC;
        width:100px;
        margin:auto;
}

That will only center them inside their container.

If you want them to center in the page then all of their containers must be centered the same way.

I suggest you spend a little time with this:  http://www.w3schools.com/css/css_positioning.asp



Cd&
0
edvinsonAuthor Commented:
Thanks. The tips provided on that link are not working.

The magin 0 auto  rule appears to do nothing.

Why is so hard to simply center these four boxes? Hmmmm, I must be really missing something fundamental.

0
COBOLdinosaurCommented:
I must be really missing something fundamental

You are not paying attention to what I said.

The result of margin:auto depends on the other attribute being applied.

If you want to apply things without giving them a context where they work then you are going to spend a lot of time wasted with no success.

When you are ready to deal with the structure instead of one line of code, let me know and I will be glad to help.


Cd&

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Dave BaldwinFixer of ProblemsCommented:
You should listen to @COBOLdinosaur , he's trying to help you.  I read your question and decided that I didn't want to have to rewrite all of it.  Nothing in CSS and HTML stands alone, it always depends on the elements and attributes around it.

Cd&, your comments are even more interesting than Ray's.
0
edvinsonAuthor Commented:
When you are ready to deal with the structure instead of one line of code, let me know and I will be glad to help.

I think you are participating in the wrong forum with advice and comments like that, Cobol Dino.

For some reason you must think I am writing in this thread for some other reason than I do not understand how to accomplish a solution to my problem.

Putting all that aside, I am still stuck.  When I gave my wrapper div its width and set margin to 0 top and bottom, and auto left and right, I am still not seeing the desired results.

I am wondering if , again, i may be missing something that is critical.

I'll keep trying. If anyone else has any advice I would sure appreciate it. I don't need links though, I have read them.

Regards,


0
edvinsonAuthor Commented:
whew. found it.

embarrassingly enough, a typo in my external class file.

0
Dave BaldwinFixer of ProblemsCommented:
Centering the 'div's works fine for me when I do it...
<!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" />
<title>jquery playground</title>

<style type="text/css">

#wrapper
{
width:850px;
margin-left:auto;
margin-right:auto;
}
#box1 {
        background-color: #FFC;
}
#box2 {
        background-color: #6F3;
}
#box3 {
        background-color: #F6F;
}
#box4 {
        background-color: #CF3;
}
.main-box {
        height: 300px;
        width: 200px;
        border: 1px solid #000;
        float: left;
        margin-left: 10px;
}

#discount-container {
        clear:both;
        padding: 5px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
}
</style>
</head>

<body>
<div id="wrapper">
        <div id="menu-box">
                <div class="main-box" id="box1">Box 1</div>
        <div class="main-box" id="box2">Box 2</div>
        <div class="main-box" id="box3">Box 3</div>
        <div class="main-box" id="box4">Box 4</div>
        <div id="discount-container">Your Discount is:</div>
    </div>
</div>

</body>
</html>

Open in new window

center-div4.jpg
0
Dave BaldwinFixer of ProblemsCommented:
Good, I was still typing when you posted.
0
COBOLdinosaurCommented:
Here is the first box:

<div class="main-box" id="box1">Box 1</div>

main-box class is a left float.  It can't be both left and centered.
 Do main box this way:
.main-box {
	height: 300px;
	width: 200px;
	border: 1px solid #000;
        margin: 0px auto 0px auto;

}

Open in new window


That should at lest give it a start

as for:
I think you are participating in the wrong forum with advice and comments like that, Cobol Dino.
If you have a problem with the way I comment then ask me to leave, there are other question I can work on.

@dave,
Is interesting good or bad?


Cd&

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
Oh, it's good Cd&.  A little direct for some peoples taste... but i don't have a problem with it.
0
COBOLdinosaurCommented:
oops, I guess I type too slow.


Cd&
0
COBOLdinosaurCommented:
Oh, I thinking he wanted them one on top of the other.  


Cd&
0
edvinsonAuthor Commented:
@Cd& -  I think you could have worded your comments in a more professional manner earlier in this thread.

Putting my opinion aside, your solution was most helpful.

If we run across each other in the future here, maybe we can put aside the sarcasm - as I promise not to post questions that I am not "ready to deal with". I was stuck, and that's why I became a member here, to obtain helpful advice. And for that, ultimately, I thank you.

Regards,

0
COBOLdinosaurCommented:
@edvinson,

I am sorry if you were offended by my approach.  I am what I am... an aggressive attacker of problems.  It is not the first time someone has not liked what I posted and it is pretty much a guarantee it won't be the last.  There are some on this site who don't like me, but they still want me to work on their problem.  I've answered almost 5000 questions on EE and at least an equal number on other sites. In probably 20-25% someone didn't like something I said.  It's not personal, I simply expect the person asking the question to be helping me solve their problem.  It's just the way I am.  

I'll be happy to help on any future problems you have, but don't get upset if I'm aggressive, that is how I solve problems.


Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.