my text and content isn't being "contained" in the specified dimensions

<div id="content_container">

    <div class="inner_container">
        gffghfbvbvvbvbnvbnvnvbnvnbvnbvvnbvv

    </div>
    <div class="inner_container">
    </div>
    <div class="inner_container">
    </div>

</div>

the css:

#content_container{
position:absolute;
border:1px solid;
width:550px;
height:200px;

}

.inner_container{
position:relative;
float:left;
width:177px;
height:190px;
margin: 2px;
border: 1px solid;
}

I swear i've done this bef开发者_如何转开发ore, so Im confused why my text is overlapping and coming out of the specified 177px dimensions?

That's the default behavior when something overflows in CSS. You'll need to set the overflow property if you want a different behavior such as overflow: hidden or overflow: scroll.

It's overflowing because the text is a single word with no spaces, which doesn't wrap when rendered.

What is the desired effect? You can set overflow: hidden; to hide the overflowing text, or overflow: auto; to add a scrollbar to the div when necessary, etc.

I dont find any problem with your html and css its work fine.

The only problem is your text gffghfbvbvvbvbnvbnvnvbnvnbvnbvvnbvv it have to like gffg hfbvbv vbvbnvbnvnvb nvn bvn bvvnbvv ie with white space.

if you have single word long then your defined width , then you have to use overflow:hidden

ie

.inner_container{
overflow:hidden;
}

Using overflow, you can decide to let the box scroll

overflow:scroll;

or hide the rest of the text

overflow:hidden;

See here for more details