CODEWITHSUNDEEP
htmlcss
Adam Skiba
Adam Skiba

Reputation: 633

CSS, 2 divs, 1 expanding 1 fixed, but needs to wrap

I have 2 divs, and I need both of them to have a minimum size of about 300px. I need the left div to stretch out to the available space, however if the window size is too small, then the right div needs to drop below. This is what I have currently, but Im not sure what to change.

<style>
.bbleft {
    min-height: 237px;
    overflow:hidden;
}

.bbright {
    float: right;
    width: 300px;
    min-height: 237px;
    margin-left: 10px;
}
</style>

Upvotes: 1

Views: 82

Answers (3)

He Hui
He Hui

Reputation: 2236

fiddle

A css3 approach..

Flexible left div. Right div drops when page too small. Left div fills up the rest of the space.

HTML

<div class="left"></div>
<div class="right"></div>

CSS

body{
    width:100%;
}
body div{
    min-width:300px;
    float:left;
}

.left{
    width: calc( 100% - 310px );
}

Upvotes: 1

Sam
Sam

Reputation: 139

This is what you need

http://jsfiddle.net/fxWg7/790/

HTML

<div class="container">
    <div class="left">
        content fixed width
    </div>
    <div class="right">
        content flexible width
    </div>
</div>

CSS

.container {
   height: auto;
   overflow: hidden;
}

.left {
    width: 300px;
    float: left;
    background: #aafed6;
}

.right {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    min-width:300px;
    width: auto;
    max-width:500px; /* not neccessary */
    overflow: hidden;
}

Upvotes: 1

Hushme
Hushme

Reputation: 3144

simple use this

.bbleft {
    min-height: 237px;
    overflow:hidden;
float:left;width:100%;
}

Upvotes: 0

Related Questions