Log in

View Full Version : multiple div exceed the border of a prent div


kuhashmi
07-19-2010, 07:27 PM
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"><img src="images/logo_slogan.jpg" />
<div class="manu">
<div class="manuitem">
<ul>
<li><img src="images/errow.jpg" class="errow_spacing" /><img src="images/home.jpg" /></li>
<li class="manudevider"></li>
<li><img src="images/errow.jpg" class="errow_spacing"/><img src="images/aboutus.jpg" /></li>
<li class="manudevider"></li>
<li><img src="images/errow.jpg" class="errow_spacing"/><img src="images/services.jpg" /></li>
<li class="manudevider"></li>
<li><img src="images/errow.jpg" class="errow_spacing"/><img src="images/photogallery.jpg" /></li>
<li class="manudevider"></li>
<li><img src="images/errow.jpg" class="errow_spacing"/><img src="images/contactus.jpg" /></li>
</ul>
</div>

</div><div id="flashportion"><img src="images/flashportion.jpg" /></div>
</div><div id="box2"><img src="images/callus.jpg" /></div>

</div>


<div id="content">
<div id="servics_manu"><img src="images/servicesheading.jpg" /><br />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<br>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
gwmbox
07-20-2010, 04:19 AM
Add this to your style sheet


.clear {clear:both;}

and before the containerwithborder closing div add


<div class-"clear"></div>

so the last part of your html will be



<div class="clear"></div>
</div><!-- containerwithborder -->
<div id="footer">
FOOTER
</div><!-- footer -->
</div><!-- maincontainer -->
</body>
</html>

Tip: Add comments after each div to identify what the closing div belongs to, this will help you track down what needs to go where.

Cheers

GW
kuhashmi
07-25-2010, 02:56 PM
I have created a box and in which i us list style <ul> to create a list. Know when i put my text under <ul><li> it moves little bit right. I try several things to move it back little bit towards left side bit can't figure it out.

I am placing css code and html. Looking for help.

CSS CODE:

.servicesbox
{
float:left;
width:292px;
margin-left:11px;
margin-right:-300px;
}
.servicestext
{
float:left;
font-size:11px;
width:285px;

}
.listline
{
list-style:none;
background-image:url(images/dotsline.jpg);
height:1px;

}

HTML CODE:

<div class="servicesbox">
<div class="welcomeheading">Professional Services</div>
<hr />
<b>Money Recovery Australia is committed to reunite rightful owners with their money!. We specialise in recovering unclaimed money with regard to unclaimed
</b><br />
<div class="servicestext">
<ul>
<li>Deposits and Bonds – Electricity, Water, Telephone</li>
<li class="listline"></li>
<li>Council Deposits and Rental Bonds</li>
<li class="listline"></li>
<li>Unclaimed Banks and Savings Accounts funds</li>
<li class="listline"></li>
<li>Unclaimed Deposits and Bonds</li>
<li class="listline"></li>
<li>Unclaimed Council deposits and Rental bonds</li>
<li class="listline"></li>
<li>Unclaimed Banks and Savings Accounts funds</li>
</ul>
<a href="services.html"><img src="images/morebutton.jpg" style="float:right" /></a>
</div>
</div>
</div>

Thanks
Kaleem