Css positioning question

Associate
Joined
19 Jul 2006
Posts
1,847
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;
}
 
Soldato
Joined
12 May 2007
Posts
3,896
Location
Bristol
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.
 
Associate
OP
Joined
19 Jul 2006
Posts
1,847
Edit found that out,

HOw do i now position them in the center of the container div
 
Last edited:
Soldato
Joined
9 Mar 2010
Posts
2,838
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
 
Back
Top Bottom