div does not inherit correct width
 

I have some nested divs which user percentages for sizing the width. The divs are floated for positioning which works fine. The problem is that one of the divs (sub-content) which contains two floated divs sized at 35% and 65% does not occupy the same width as the divs above and below it, resulting in the border being out of line with everything else. this is what it looks like in firefox:

http://www.tracethisbook.com/images/firefox.tiff

and here's what it should look like, as displayed in safari

http://www.tracethisbook.com/images/safari.tiff

The relevant code is below. I've included a few small bits of inline styling as well as relevant CSS so I didn't have to include all of the CSS files.

<div class="content">

        <div class="content_header"><h2 class="header_text">View Traces</h2></div>

        <div class="nav">

               <!-- nav bar stuff -->

        </div>

        <div class="internal_content">

             <div class="sub_header rounded_top"><h2 class="sub_header_text">Details for Trace</h2></div>

                <div class="sub_content">

                        <div class="book_details">

<div style="float:left"><img class="book_cover" src="" /></div>

                                <div style="float:left" class="trace_details">

                                        <table class="info">

                                                <!-- table displaying book details -->

                                        </table>

                                </div>

                        </div>

                        <div id="trace_details">

                                <table class="list">

                                    <!-- table shown more info -->

                                </table>

                        </div>

                </div>

        <div class="sub_footer rounded_base"></div>

</div>



.content{

        border-style:solid;

        border-width:1px;

        border-color:022c82;

        margin-left:1%;

        margin-bottom:10px;

        padding-bottom:10px;

        background-color:white;

}

.internal_content{

        width:98%;

        padding:10px;

}

.sub_header{

        width:100%;

        background-image:url(/images/sub_header.gif);

        height:30px;

}

.sub_footer{

        width:100%;

        background-image:url(/images/sub_header.gif);

        height:30px; 

       clear:both;

}

.sub_content{

        border-style:none solid none solid;

        border-width:1px;

        border-color:bebeff;

        padding:5px;

        height:auto;

        float:right;

}

.book_details{

        width:35%;

        float:left;

        clear:left;

}

.trace_details{

        width:65%;

        min-width:300;

}

I think I've including everything above. Does anyone have any idea why this renders fine in Safari, but not in Firefox. Also, in Opera, the trace_details and book_details divs render with their smallest possible widths and the border on the sub_content div is even further out of line. Any help would be greatly appreciated.
Thanks,
Kev

Re: div does not inherit correct width
 

First things first. You dont have "#" before your colours. Secondly, the tracy_details class, min-width, does not have a unit. To be totally honest i can't see what is going on, i would help you, if you get setup some bg colours and some content holders just to make it a little clearer.

Re: div does not inherit correct width
 

Remove padding from .internal_content and add padding-left:10px to .sub_header

Re: div does not inherit correct width
 

You forgot that margins, borders, and padding are added OUTSIDE the width and height styles. This makes the inner objects too big to fit in your container if the width percentages add to 100%.

Re: div does not inherit correct width
 

1) Remove the "float:right" from the sub_content div to get it to fill the width of the internal_content div.
2) Add a "float:right" to the trace_details list to get this to position properly (which you have as an ID and should change to a class as previously mentioned.) I'm assuming this is the div containing the "location, reader, rating, etc." content.
3) When I do this, I still see that the divs contained by the sub_content div flow outside of aub_content boundaries (not sure if you see this with the content present and whatever DOCTYPE you are using.) Adding an "overflow:auto" to the sub_content div keeps these contained divs from flowing outside of the box.

Here is modified code. Took out the images and substituted background colors & labeled the divs so that the whole thing is easier to see.

Let me know if this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<!-- http://www.daniweb.com/forums/thread200673.html -->



<HEAD>

<STYLE type="text/css">



.content{

        border-style:solid;

        border-width:1px;

        border-color:022c82;

        margin-left:1%;

        margin-bottom:10px;

        padding-bottom:10px;

        background-color:white;

}

.internal_content{

        width:98%;

        padding:10px;

        background-color:yellow;

}

.sub_header{

        width:100%;

        background-color:red;

        /* background-image:url(/images/sub_header.gif); */

        height:30px;

}

.sub_footer{

    width:100%;

        background-color:blue;

        /* background-image:url(/images/sub_header.gif); */

        height:30px; 

    clear:both;

}

.sub_content{

        border-style:none solid none solid;

        border-width:1px;

        border-color:bebeff;

        background-color:green;

        padding:5px;

        height:auto;

        overflow:auto;

}

.book_details{

        width:35%;

    float:left;

    clear:left;

        background-color:gray;

}

.trace_details{

        width:65%;

        min-width:300;

        background-color:orange;

        float:right;

}



</style>

</HEAD>

<BODY>

<div class="content">

        <div class="content_header"><h2 class="header_text">content_header</h2></div>

        <div class="nav">nav

               <!-- nav bar stuff -->

        </div>

        <div class="internal_content">internal_content

             <div class="sub_header rounded_top"><h2 class="sub_header_text">sub_header_text</h2></div>

                <div class="sub_content">sub_content

                        <div class="book_details">book_details

<div style="float:left"><img class="book_cover" src="" />book_cover</div>

                                <div style="float:left" class="trace_details">class trace_details

                                        <table class="info">info

                                                <!-- table displaying book details -->

                                        </table>

                                </div>

                        </div>

                        <div class="trace_details">id trace_details <!-- was an id instead of a class -->

                                <table class="list">list

                                    <!-- table shown more info -->

                                </table>

                        </div>

                </div>

        <div class="sub_footer rounded_base">sub_footer rounded_base</div>

</div>

</body>

</html>