Grow your CSS skills. Land your dream job.

[Solved] multiple div exceed the border of a prent div

  • # July 19, 2010 at 3:00 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;

    Code:
    #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:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Here we will put our services detail so you can view what we provide services.

    • PoolFancing
    • Colorbond Fencing
    • Standard paling Treated Pine
    • Lapped Paling TP
    • Lapped and capped TP
    • Picket Fences
    • Federation / heritage standard fence
    • Horizontal Hardwood Screen Fencing
    • Hand Rails
    • Ballustrades
    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.


    Please help me my job is in danger

    # July 19, 2010 at 7:12 pm

    can you give us some screen shots or a link to the page?

    your code has indirect links (src="images/errow.jpg") so I can test how it loooks.

    (also, place code inside the code tag. thanks)

    # July 19, 2010 at 7:16 pm

    It’s hard to follow your code but try putting

    Code:
    overflow: hidden;

    inside the #maincotainer

    also, why do you have two containers? you can add the border to the #maincotainer, remove the #containerwithborder, leave the #footer outside that container and get the same result.

    CSS needs to be cleaned up. There is some divitis in there.

    # July 25, 2010 at 10:38 am

    thanks for your help. Its works perfectly.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".