Css positioning question

hargi · 12 Mar 2010 at 15:14

I have the following that displays nearly ok.
The logo is fine.

The content is slightly wrong. The images are going to be 200 x 200

what i want is square with text centred underneath it bit of a gap another square with text underneath it. then i want to drop down and do the same again for the other 2 squares.

am i doing this correctly and what do i need to change?

Thanks in advance

HTML

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="e4allcss.css" type="text/css" media="screen"/>
</head>
<body>
    <div id="container">
        <div id="logo">
            <img src="Logo.jpeg" alt="logo" width="481" height="98"/>
        </div>
        <div id="content">
            <img src="Square.jpg" alt="Square" />
            <p>Start Here</p>
        </div>
        <div id="content">
             <img src="Square.jpg" alt="Square" />
            <p>Teaching </p>
        </div>
        <div id="content">
             <img src="Square.jpg" alt="Square" />
            <p>Managing </p>
        </div>
        <div id="content">
             <img src="Square.jpg" alt="Square" />
            <p>Extras</p>
        </div>
    </div>
</body>
</html>

CSS

Code:

@charset "UTF-8";
/* CSS Document */

* html #maincol
{
    height: 400px;
}

body
{
    background-color: #000;
}

#container 
{
    width:900px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color:transparent;
}

#logo
{
    padding-left:40px;
    display:block;
    top:0px;
    left:40px;
    height:120px;
    
}

#content
{
    display:block;
    min-height:200px;
    height:auto !important;
    height:300px;
    min-width:200px;
    width:auto !important;
    width:300px;
    text-align:center;
}

#content p {
    color:#fff;
}

Tripnologist · 12 Mar 2010 at 15:23

You would want to do something like..

Code:

<div id="content">
	<div class="contentbox"></div>
	<div class="contentbox"></div>
	<div class="contentbox"></div>
	<div class="contentbox"></div>
	<div class="contentbox"></div>
	<div class="contentbox"></div>					
</div>

Code:

#content { margin: 0 0 0 -15px;}
#content .contentbox { float: left; width: 200px; margin: 0 0 15px 15px;}

The negative margin on content must match the margin you want between the boxes. You'll also need to clearfix #content.

hargi · 12 Mar 2010 at 15:31

Edit found that out,

HOw do i now position them in the center of the container div

RoyMi6 · 12 Mar 2010 at 16:31

Hargi, because you know the width of your container, and how wide the content is going to be, you could just pad the content in accordingly.

Or you could use the following

Code:

<div id="container">
	<div id="content">
		<div id="contentboxContainer">
			<div class="contentbox">1</div>
			<div class="contentbox">2</div>
			<div class="contentbox">3</div>
			<div class="contentbox">4</div>
			<div class="contentbox">5</div>
			<div class="contentbox">6</div>			
		</div>
	<div>
</div>

Code:

#content{
		margin:			0 auto;
		width:			415px;
	}
	
		#contentboxContainer{
			width:			430px;
			margin:			0 0 0 -15px;
		}

			.contentbox{
				float:			left;
				width:			200px;
				height:			200px;
				text-align:		center;
				margin:			15px 0 0 15px;
			}

The trick here is the "margin: 0 auto" which is short hand for:

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

and effectively centres a div inside another element.

Roy