Centering two divs inside a large div

Shicky

Shicky

Shicky

Associate
Joined
13 Jan 2007
Posts
2,424
Location
Belfast,Northern Ireland
having problems as mentioned in the title, I know the standard solution is margin 0 auto but this isn't working. My thinking is because its two divs and that's making it freak out? I had a similar issue before and solved it using display: block-inline; but the current situation appears to be different.

I'll skip the HTML code as the divs are correctly nested inside the large container. Container is the container surprisingly and the four #block_ things are whats inside it. I basically want 1 large block beside one small block and the same below, this is currently fine but the alignment on the page is not centered, they're just obeying the temporary margins I have set on them. Here's the CSS:

Code: 
body {
   		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	    font-size: 12px;
	    color: #838383;
	    margin: 0px;
	    padding: 0px;
	    /*background-color: #156894;*/
	    background: url(../Images/black_background_03.png);
	    background-repeat: repeat;
		width:100%;
	 }
	 
h4 {
	color: #00aeef;
	font-weight:bold;
	font-size:12px;
	margin: 0px;
	    padding: 4px 0px 0px 10px;
}

h5 {
	color: #b6b6b6;
	font-weight:bold;
	font-size:10px;
	margin: 0px;
	    padding: 0px 0px 0px 10px;
}
	 
#container {
	width:950px;  
     margin:0 auto;  
     border:1px solid red;
	overflow:auto;
		   }
	
#header {
		width:769px;
	 	padding-top:20px;
		margin:0 auto; 
		}		   
			
#footer {
	 	background-image: url(../Images/footer3.png);
	    background-repeat: repeat;
		margin:auto;
		height:140px;		
		}
		
#footer_nav {
	 	float:right;
		padding-right:475px;
		}	
		
#footer_container {
	 	text-align:center;
		padding: 50px;
		}		
		
#block_toptunes {
 float: left;
 width: 250px;
 margin-top: 20px;
 margin-left: 10px;
}

#block_shoutouts {
 float: left;
 width: 250px;
  margin-top: 20px;
 margin-left: 10px;
}

#block_content {
 float: left;
 width: 500px;
 margin-top: 20px;
 margin-left: 10px;
 text-align:justify;
 
}

#block_feature {
 float: left;
 width: 500px;
  margin-top: 20px;
 margin-left: 10px;
}

.big-content-top {
	float: left;
 height: 40px;
 width: 485px;
 background: url(../Images/big_content_top.png) no-repeat;
 padding: 0px 15px ;
}

.big-content-middle {
 float: left;
 width: 500px;
 background: url(../Images/big_content_middle.png) repeat-y;
  padding: 5px 15px 0 15px; 
}

.big-content-bottom {
float: left;
 height: 13px;
 width: 500px;
 margin-bottom: 15px;
 background: url(../Images/big_content_bottom.png) no-repeat;
}

.small-content-top {
	float: left;
 height: 40px;
 width: 235px;
 background: url(../Images/small_content_top.png) no-repeat;
 padding:0px 15px ;
}

.small-content-middle {
/* float: left;
 width: 217.5px;
 padding: 5px 15px 0 15px;
 border-right: 1px solid #272727;
 border-left: 1px solid #272727;
 background: #000;*/
 float: left;
 width: 250px;
 background: url(../Images/small_content_middle.png) repeat-y;
  padding: 5px 15px 0 15px; 
}

.small-content-bottom {
 float: left;
 height: 10px;
 width: 250px;
 margin-bottom: 15px;
 background: url(../Images/small_content_bottom.png) no-repeat;
}

form{
	padding-top:5px;
	overflow:auto;
	margin:0 auto;
	width:244px;
}

input[type=text], textarea {
	width:212px;
	background:#080808;
	color: #838383;
	font-size:14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	outline:none;
	border:1px solid #292929;
}

input[type=text]:hover, textarea:hover, input:focus, textarea:focus {
	background: #eeecec;
	outline:none;
}

input[type=submit] {
	cursor:pointer;
}
		
.bluetext {
			color: #00aeef;
}

.whitetext {
			color: #ffffff;
}

*Current thought is to use another container the same width as my header, then just float left for the large blocks, float right for the small blocks?
 
You may need more mark up. I always struggle without seeing it in action anyway. But from what I can tell you may need a container for the centralised blocks.

<container>
<container 2 centralised>
<block></>
<block></>
</>
</>

That said, why don't they fill the 950px width of the main container?
 
Yep, gord is right, you need to have another div to wrap around the two you want centered.

That will allow you to center the master div containing the two child divs.
 
But they are wrapped in the current container as gord said? The header for example centers as I want and its part of the same container.

I dont understand how the result will be any different inside another container unless I abandon margin: 0 auto and go with float left and right, using set pixel margins to tidy it a bit?
 
Do you have a test site we can look at? I'm struggling to visualise what you want.

If your header is 950px width then that will fill the width of the first centralised container. If the sum of your block's widths are smaller than 950px and you want to centralise those then you will need a secondary centralised container to do it.
 
My header is not the full width of the container but is centralised, the content divs are not centralised despite margin:0 auto and other attempts.

Going to stick it up live now, will post the url once uploaded
 
Pop anther div in after the container div and close it just before the container div closes and then margin: 0 auto that div. You wont need to align the header to the centre then either as it will be inside the new div which is centred.
 
Shicky said:
The header for example centers as I want and its part of the same container.
Click to expand...
Part of, yes, but its not a direct child.

You're header has its own header container which is giving margin: 0 auto to the image.

The blocks are actually sat directly under the main container. So they need their own container too.

That said, why does your content not fill the 950 width of the main container?
 
okay thanks, sorry i didnt mean to seem unwilling to the extra container solution but was just puzzled why the content containers behaved the way they do. Not too sure gord!
 
Basically you are adding more markup than necessary at the moment because you are centralising within a centralised element.

There are legitimate applications for that, but in your design the header and the blocks could just be 950 wide, which negates the need for further containers.
 
I've been doing some stuff like this today. You need to add the following to the stylesheet for div you want to center:

Code: 
position: relative;
display: block;

Took me a while to figure it out tho. Not sure as to why, but it is something I found whilst googling the interwebs.
 
Divs display as block by default.

To the OP, as said, the best markup is the least markup, read up on the box model and how margin and padding work else you will only be able to do the simplest layouts.
 
Yeah I now have a new inner-container which is the same width as the header. As suspected the margin setting of 0 auto there didnt change anything. I used float left and float right to position them correctly which seems okay other than a bit of mismatching in terms of content box heights
 
Forgot to ask, the text overflowing from the bottom content box...how do I avoid this? I thought it would just push the content down but apparently not.

Is it just me or is the room im using a bit too cramped now? Maybe make some new boxes and use 950 as my inner container (red border)
 
960 is a generally accepted standard. Google for 960grid for more info.

As for the overflow, it appears to be flowing out on the right hand side? That's just because your width for that content is too wide.
 
You must log in or register to reply here.
Back
Top Bottom