multiple div exceed the border of a main div
Posted: 19 July 2010 10:02 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2010-07-19

Hi,
I have created a main div and that div have a border color. Know I want that every thing to be within that main div container except footer. But when I put multiple div and use especially float or position the multiple div exceed the border of main div.thing
Know how can I put every thing within that main border.
I am pasting the css and HTML code. Immediate help appreciated.

CSSCODE;

#maincotainer
{
margin-left:auto;
margin-right:auto;
width:900px;
}
#containerwithborder
{
border:1px solid #CCCCCC;
width:900px;
}

#header
{
margin:0;

}
#content
{
padding:1px;
clear:both;
}
#footer
{
clear:both;
margin-right:auto;
margin-left:auto;
height:78px;
width:900px;
background-image:url(images/footerbackground.jpg);
}

#box1
{
position:relative;
float:left;
width:614px;
}
#box2
{
margin-top:30px;
position: absolute;
float:left;
margin-left:630px;
}
.manu
{
margin-left:2px;
clear:both;
position:relative;
float:left;
background-image:url(images/manuback.jpg);
width:235px;
height:307px;
}
.manuitem
{
padding-top:28px;

}
.manuitem ul
{
margin:0;
padding:0;
}
.manuitem ul li
{
display:block;
}
.manudevider
{
background-image:url(images/manudevider.jpg);
height:2px;
margin-bottom:10px;
margin-top:7px;

}
.errow_spacing
{
padding-right:10px;
padding-left:20px;

}
#flashportion
{
position:absolute;
margin-left:265px;
float:left;
width:345px;
height:307px;
}

#servics_manu
{
position:relative;
float:left;
width:238px;
margin-top:5px;
}
.serviceslist
{

padding-left:40px;
padding-top:10px;
}
.serviceslist ul
{
margin:0;
padding:0;
}
.serviceslist li
{

list-style-image:url(images/errow2.jpg);
text-decoration:underline;
}
#welcome
{
margin-top:10px;
position:absolute;
float:left;
margin-left:250px;
width:630px;

}

HTMLCODE:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Daves Fancing</title>
<link href=“fancingcss.css” rel=“stylesheet” type=“text/css” />
</head>

<body>
<div id=“maincotainer”>
<div id=“containerwithborder”>
<div id=“header”>
<div id=“box1”>images/logo_slogan.jpg
<div class=“manu”>
<div class=“manuitem”>
<ul>
<li>images/errow.jpgimages/home.jpg</li>
<li class=“manudevider”></li>
<li>images/errow.jpgimages/aboutus.jpg</li>
<li class=“manudevider”></li>
<li>images/errow.jpgimages/services.jpg</li>
<li class=“manudevider”></li>
<li>images/errow.jpgimages/photogallery.jpg</li>
<li class=“manudevider”></li>
<li>images/errow.jpgimages/contactus.jpg</li>
</ul>
</div>

</div><div id=“flashportion”>images/flashportion.jpg</div>
</div><div id=“box2”>images/callus.jpg</div>

</div>


<div id=“content”>
<div id=“servics_manu”>images/servicesheading.jpg
Here we will put our services detail so you can view what we provide services.
<div class=“serviceslist”>
<ul>
<li>PoolFancing</li>
<li>Colorbond Fencing</li>
<li>Standard paling Treated Pine</li>
<li>Lapped Paling TP</li>
<li>Lapped and capped TP</li>
<li>Picket Fences</li>
<li>Federation / heritage standard fence</li>
<li>Horizontal Hardwood Screen Fencing</li>
<li>Hand Rails</li>
<li>Ballustrades</li> 
</ul>
</div>
</div>
<div id=“welcome”>Welcome To Daves Faccing
We specialise in quality Pool, Timber and ColorbondR fencing.
Our guarantee of quality work combined with COMPETITIVE pricing sets us apart from the others.
Also, unlike most Fencing Contractors, we WILL turn up to quote you. With ov   er 10yrs experience in the industry, you can rest assured that you will get quality products and service combined with a reasonable price.</div>
</div>

 

</div>
<div id=“footer”>FOOTER</div>
</div>

</body>
</html>

Please help me my job is in danger

Profile