Hi All,

Having a little bit of trouble with a new WIP layout and tearing my hair out with a simple problem - http://www.jameshenry.info/test/video.php?video=13

I'm looking for my video content box to be centred within the main containing frame - Normally I'd use 'margin-left: auto; margin-right: auto;' to do this, and this is what I'm trying to use at the moment, it just doesn't seem to be working!?!!

Here is my CSS:

.rightbar {
	width: 100%;
	margin-left: auto;
  	margin-right: auto;
}

.videobox {
	width: 657px;
	height: 435px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-indent: 9px;
	padding-top:9px;
	padding-bottom: 9px;
}

And then I am organising content like this:

<div class ='rightbar'><div class='videobox'>VIDEO HERE</div></div>

Anybody know where I am going wrong here?!

You've put the margin on the .rightbar class (which has 100% width, so there won't be any margin at all), surely you'll want the margin on the .videobox class.

haha, I knew it was something so stupid.

Thanks so much, Not sure why I didn't notice this.

you can use

margin:auto;

too instead of one for each side

Originally Posted by secondsighting

you can use

margin:auto;

too instead of one for each side

Not entirely true, depending on the situation of course. Using margin: auto; would set automatic margin on all four sides (top, right, bottom and left). If the OP wishes the top and bottom margin to stay unchanged (these could be set else where) the left and right margin must be set individually.