BleepingComputer.com: Div Boxes and centering

Still doing a website for a big client, its been jumping ahead in leaps and bounds which is really great and i have having a good time learning php and css, recently hit a few speed bumps in unlikely places, such as vertically positioning text in div boxes (i didn't think it would be so complicated) now im having trouble getting divs to center and float and the same time.
here is the url.

http://www.humanresources.com.au/jit/OHR%2...;page=flowchart

this 'flowchart' is just a bunch of small div boxes that are hyperlinked that take you to an appropriate page.

i need to have them centered and spaced out nicely, the row on the top is pretty much how it should look, only at the moment if it had three buttons they would all float to the right, of left, im not sure which.

the 2nd row in the other hand centers buttons how i need them, but without the float property it wont line up horizontally.

Hope you guys know what im talking about.

First row.

div.rowone	{
	text-align: center;
	float: right; 
	position:relative; 
	margin:auto; 
	border: thin solid #000; 
	height:52px; 
	width:auto;
	}


div.rowtwo	{
	position:relative; 
	top:100px;
	border: thin solid #000; 
	height:52px; 
	}

(you'll be pleased to know i have indented like you told me i should last time)


Thanks heaps!!

http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html is a good tutorial for centering vertically.

Why not try something like this?

I know this is for tables, but you might be able to mod it for a div...

<table align="center" height="100%" width="100%">
<tr>
<td valign="middle" align="center">&nbsp;</td>
</tr>
</table>

Good luck!

I have tried to align it in the HTML, (even though it isn't valid), but for some reason it still wont happen for me, i haven't resorted to tables yet, my boss likes to make things difficult. i need a css soloution.

Thanks though kamaka7.

and samsbc12 i need to have them horizontally centered, vertically i have got it working fine.

Have you tried using the CSS Margin property other than on auto? You should be able to move the divs around virtually at will as long as you obey a few simple rules - watch out for total widths of content, padding and margins combined as this could 'break' the page. If they are floated they need to be put in your HTML in the correct order otherwise you weill get unexpected results - it usually works right-left-right-left and so on, as many as you like. Make small changes you can keep track of. Validate the changes to avoid unexpected errors cascading into sleepless nights lol.

This post has been edited by webrat: 01 May 2009 - 12:25 PM

Take a look at this:

body {
margin-left:10%;
margin-right:10%;
}

#header {
width:30%;
background:black;
height:280px;
float:left;
}


#header-right {
width:50%;
background:black;
height:280px;
float:left;
}

#content {
width:80%;
background:black;
float:left;
}

#footer {
width:80%;
background:black;
float:left;
}

p {
color:white;
font-family:Arial;
margin:8px;
}

a {
color:white;
font-family:Arial;
margin:8px;
border:0px;
}

I recently had the same problem, try using margin for the left and right, not the most orthodox method but hey it works...

Hope this helps, Wolfy87.

I was just speaking to someone on the topic, i think this will solve your problem:

<style type="text/css">
<!--
div.maincontainingdivetc {
width:800px;
height:200px;
margin:0 auto;
}
-->
</style>

Set the width to whatever you like and change the div name, i just used that dumb name for an example but that will center a 800 x 200 div...

Hope this helps, Wolfy87.

Hey good news, my boss finally relented and let me use table.
which i think is the easiest way around this and the customer then doesn't get charged for me googling and bleeping for the answers.

Again, thanks for the help. this has been a pretty big project for me in my spare time and i appreciate the help.

haha, good old bosses... good luck with it all