Question

Ok, I want this:

For that, I have this HTML code:

<div id="wrapForCenter">
    <div id="title">
        title
    </div>
    <div id="contentFrame">
        <div id="imagePlaceholder">
            image
        </div>
        <div id="content">
            content
        </div>
    </div>            
    <div id="buttonsBar">
        buttonsBar
    </div>      
</div>

And I have this CSS code:

#wrapForCenter
{
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -240px;
    width: 480px;
    height: 320px;
    border: 1px solid black;
}

#title
{        
    width: 100%;
    height: 40px;
    background-color: Blue;
}

#contentFrame
{
    height: 240px;
    width: 480px;
}

#imagePlaceholder
{
    float: left;
    width: 100px;
    height: 100%;
    background-color: Green;
}

#content
{
    float: left;
    width: 380px; /*<-- look at this*/
    height: 100%;
    background-color: Yellow;
    overflow: auto;
}

#buttonsBar
{
    clear: left;
    width: 100%;
    height: 40px;    
    background-color: Silver;
}

If I change the contents width to 100%, why occurs this?

What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?

Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?

Thank you very much. CSS is not my strenght.

Answer 1

This is called a float drop. Floats work such that they’ll fit side-by-side as long as there’s enough room for each, but a float will bump down below the previous one if there’s not enough room for it to fit.

width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it’s container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier “sibling”) to fit.