PHP Background Colouring Issue

AKalair · September 1, 2009

Hi guys,

I have a problem that is quite difficult to explain but I'll try my best ...

To Begin With Heres my CSS:


/* CSS Document */

/* Border Around Boxes not Page */

.equal 
{
margin:10px auto;
border-spacing:10px;
background:#FFCC00; 
width:100%;
}

/* Right Column */

#container3 
{
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}


#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}


/* Footer */

#footer 
{
text-align:center;
background: #FFFFFF;
}

and heres my HTML

<head>
<link rel="stylesheet" href="css.css" />
<title> Home </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>

<body>

<div class="equal">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">

			<!-- Column one start -->

column1
			<!-- Column one end -->

</div>
<div id="col2">

			<!-- Column two start -->
column2
			<!-- Column two end -->

</div>
<div id="col3">

			<!-- Column three start -->
	column3	
			<!-- Column three end -->

</div>
</div>
</div>
</div>
</div>

<div id="footer">

Footer

</div>




</body>
</html>

Ok so the problem is I'm using the equal class to add a box around everything so I can add a background colour around them like this:

http://www.axac22.dsl.pipex.com/

I'm trying to add a background like the yellow one.

However all that happens is that the boxes are shifted down 10px

Can anyone help me colour those 10px yellow like in the example?

Thanks

Aaron

haku · September 2, 2009

Add this to .equal:

padding:10px;
overflow:auto;

Sign In

PHP Background Colouring Issue

Recommended Posts

AKalair

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information