Problem Scaling a Div

HTML & CSS
1

Afternoon all,

I’m having a bit of trouble converting a fixed-width, two-column layout to a floating one.

The problem I’m running into can be seen in the following screenshots. Essentially, the left div should scale, the right div is fixed width. The problem is that the left div isn’t filling all of the available space, it is only stretching based on the width of the longest paragraph.

The relevant CSS for the divs is below:


#dContainer
{
    background-position: 0 0;
    background:none repeat scroll 0 0;
    border:none;
    width: 80%;
    margin:auto;
    color: #1f1f1f;
}

#right-column
{
    min-height:190px;
    width:178px;
    padding:5px;
    margin-bottom:4px;
    float:left;
    margin-left:-191px;
}

#left-main-content
{
    background-color:#f6f6f6;
    border: 1px solid #c0c3ac;
    min-height:410px;
    padding:5px;
    margin-bottom:4px;
    margin-right:191px;
    float:left;
}

2

Hi sehvral. Welcome to SitePoint. :slight_smile:

Try this:


#right-column {
    min-height:190px;
    width:178px;
    padding:5px;
    margin-bottom:4px;
    float:left;
    [COLOR="Red"]/* margin-left:-191px; remove this */ [/COLOR]
}

#left-main-content {
    background-color:#f6f6f6;
    border: 1px solid #c0c3ac;
    min-height:410px;
    padding:5px;
    margin-bottom:4px;
    margin-right:191px;
   [COLOR="Red"] /* float:left; remove this */[/COLOR]
}

Make sure that the sidebar comes before the content in the HTML.