CSS - 2 div's with centred content within a div

Shicky · 21 Apr 2011 at 11:24

Love the title a lot!

Anyway yes the above is what I am attempting to achieve but not having much luck. I dont want to float the inner left and right as I want the content inside them to be centred. I want them to be constrained to the inner containers boundries too. Got close by adding a clearing div but not quite happening still. I saw mentions of overflow:hidden fixing this, they lied!

Here is the html:

Code:

<div id="outer-container">  
 	<div id="inner-container">
              <div id="header">  
  
           
              </div>  <!--end header-->
 
              <div id="inner-left">
              </div> <!--end inner-left-->
              <div id="inner-right">
              </div> <!--end inner-right-->
 
        </div>  <!--end inner-container-->
</div>  <!--end outer-container-->

CSS:

Code:

#outer-container {
	width:950px;  
     margin:0 auto;  
	overflow:hidden;
	border:solid 1px red;
		   }
		   
#inner-container {
	width:771px;  
     margin:0 auto;  	 
	overflow:hidden;
	min-height:800px;
	border:solid 1px yellow;
		   }
		   
#inner-left {
	width:305px; 
     margin:0 auto;  	 
	overflow:hidden;
	min-height:800px;
	border:solid 1px purple;
		   }
		   
#inner-right {
	width:305px; 
     margin:0 auto;  	 
	overflow:hidden;
	min-height:800px;
	border:solid 1px green;
		   }

GravyMonster · 21 Apr 2011 at 11:26

Shicky said:
I dont want to float the inner left and right as I want the content inside them to be centred.

You can still float the divs left/right and have the content within them centered?

Code:

#inner-left {
	width:305px; 
	overflow:hidden;
	min-height:800px;
	border:solid 1px purple;
	[b][i]float: left;
	text-align: center;[/b][/i]
}
					   
#inner-right {
	width:305px; 
	overflow:hidden;
	min-height:800px;
	border:solid 1px green;
	[b][i]float: right;
	text-align: center;[/b][/i]
}

Shicky · 21 Apr 2011 at 11:41

Spunkey said:
You can still float the divs left/right and have the content within them centered?

The problem is the content isn't just text, its other smaller divs

GravyMonster · 21 Apr 2011 at 11:47

It'll still work.

Shicky · 21 Apr 2011 at 11:49

is it not thought of as horrid to use that for positioning? Surely there will be issues with IE? Will give it a go now anyways!

*Nah initially the inner left & right divs set up correctly and work for just text. However when i stick in the other divs/content boxes it goes mental and inner right goes under inner left

FabienO · 21 Apr 2011 at 12:09

Code:

#container {
 width: 771px;
 margin: 0 auto;
 border:solid 1px red;
}
		   
.fifty {
 float: left;
 width: 383px;
 border:solid 1px purple; //when border removed, add 2px to width.
 min-height: 800px;
}



<div id="container">
 <div class="fifty">Left</div>
 <div class="fifty">Right</div>
</div>

Don't forget to use a clearing div after the floated divs.

.clear { clear: both; }
<div class="clear></div>

this makes sure the next element goes below the floated divs, not on top of them. It is also possible to use overflow: auto; on the container div, but the clearing div is a lot simpler if you ask me.

Shicky · 21 Apr 2011 at 13:16

http://www.warfinder.co.uk/administrator/indexnew.php

The clear never seems to work, the best I could do was to get it working but constrained within the inner_container...which it shouldnt be.

as for the two divs its the same as before, they just sit underneath...why I dont really know

GravyMonster · 21 Apr 2011 at 14:01

put clear: both; on your #footer

FabienO · 21 Apr 2011 at 14:06

You don't close either of your divs that are class="fifty"

firefox validation plugin

Chrome validation extension

UncleRuckus · 21 Apr 2011 at 14:09

OP, If you fix the errors listed you will have more control over your page.

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Shicky · 21 Apr 2011 at 16:39

Sorted, seems I am very much on track with my retarded ways these days. Giving css a rest for the day in favour of php & sql which hopefully I will mess up less!

Thanks all for the help and thanks FabienO for that plugin, I'd never heard of it

FabienO · 21 Apr 2011 at 16:52

No worries. part of the debugging is knowing the routine. Validation is one of the earlier steps. I forget to close many divs or tags. B

Better to be a small oversight than a huge issue.

Shicky · 21 Apr 2011 at 16:57

yeah I hadnt used the validator as a debugging technique, that was pretty dumb of me, considering the size of the files now I cant really expect to spot missing tags too easily.

Shicky · 21 Apr 2011 at 16:58

On a side note it is incredibly grim being inside working on this when the weather outside is immense

If I dont get my first I will go insane lol

FabienO · 21 Apr 2011 at 17:05

Oh this is for University?

What year?

One good thing about those validators is that you can use them on local hosted sites too, there's options to validate the site your viewing normally or have it auto copy all the code (local site) and paste it into the validator.

Add me on hotmail ([email protected]) or Steam (Disturbance27), that way if you need any fresh eyes you can just ask me instantly rather than waiting on a forum response.

Shicky · 21 Apr 2011 at 18:38

Thanks mate much appreciated, final year of my bachelors. Have a 76 average including the first semester of this year so I *should* be fine, just need to force the head down and keep working away

FabienO · 22 Apr 2011 at 05:06

What course?