Results 1 to 3 of 3

Thread: multiple div exceed the border of a prent div

  1. #1
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default multiple div exceed the border of a prent div

    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

  2. #2
    Join Date
    Mar 2005
    Location
    Western Australia
    Posts
    134
    Thanks
    19
    Thanked 4 Times in 4 Posts

    Default

    Add this to your style sheet

    Code:
    .clear {clear:both;}
    and before the containerwithborder closing div add

    Code:
    <div class-"clear"></div>
    so the last part of your html will be

    Code:
        <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
    1st rule of web development - use Firefox and Firebug
    2nd rule - see the first rule
    --
    I like Smilies

  3. #3
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to move the list style?

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •