My div is breaking out of its container div

I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is th开发者_如何学Pythonis happening. I do NOT have any positioning or floating going on.

Please view my HTML:

<ul class="tabs_commentArea">
    <li class=""><a href="#" class="">Starstream</a></li>
    <li class=""><a href="#" class="">Comments</a></li>
</ul>

<div id="paneWrap">
<div class="panes_comments">
    <div class="comments">member pane 1</div>
    <div class="comments">member pane 2</div>
    <div class="comments">member pane 3</div>
</div> 

My CSS, the relevant parts of it at least:

#MembersColumnContainer {
    width: 590px;
    float: left;
    padding-right: 0px;
    clear: none;
    padding-bottom: 20px;
    padding-left: 2px;
}

ul.tabs_commentArea { 
    list-style:none; 
    margin-top: 2px !important; 
    padding:0;  
    border-bottom:0px solid #666;   
    height:30px;
}

ul.tabs_commentArea li {
    text-indent:0;
    margin:  !important;
    list-style-image:none !important;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    float: right;
}

#paneWrap {
    border: solid 3px #000000;

}

.panes_comments div {
    display: ;
    padding: px px;
    /*border:medium solid #000000;*/
    height:150px;
    width: 588px;
    background-color: #FFFF99;
}

You could set max-width on either, or both, of the div elements to prevent their expansion:

#containerDiv {
    min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
    width: 50%; /* defines the normal width of the div */
    max-width: 700px; /* prevents the div expanding beyond 700px */
}

It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.

Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.

My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.

Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).

:D

I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.