CODEWITHSUNDEEP
javascripthtmlcss
Marcus
Marcus

Reputation: 627

How to styling div with CSS fixed width and auto-resize?

I want to create container div that has width between 800px to 1000px.

Inside, it has two div and want to fix left div to 250px.

For the right div I want it make width-resize automatically

jsfiddle examle

HTML

<div style="width: 100%;">
    <div class="container">
        <div class="left">
            Left div<br />(fixed to 250px)
        </div>
        <div class="right">
            Right div<br />(width fit to blue area left)
        </div>
    </div>
</div>

CSS

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;    
}
.left {
    width: 250px; 
    float: left; 
    height: 200px; 
    background-color: #0F0;
}
.right {
    width: 100%; 
    background-color: #F00; 
    height: 200px; 
    float: left;
}

Upvotes: 3

Views: 4284

Answers (5)

KeySee
KeySee

Reputation: 780

You can try to remove float:right on the red div :D or Maybe like this: http://jsfiddle.net/vn84nm30/8/

Used table features ;)

top div : display: table;

container : display: table-row

removed float left the height is decided by parent :D

Upvotes: 1

Nazmul Hossain
Nazmul Hossain

Reputation: 2085

Solution

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;
    
    
}
.left {
    width: 250px;
    float: left; 
    height: 200px; 
    background-color: #0F0;
}
.right {
    width:100%;
    background-color: #F00; 
    height: 200px; 
   
}
<div style="width: 100%; display: table; border-collapse: collapse; width: 100%; min-width: 800px; max-width: 1100px;">
    <div class="container">
        <div class="left">Left div
            <br />(fixed to 250px)</div>
        <div class="right">Right div
            <br />(width fit to blue area left)</div>
    </div>
</div>

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Remove float: left from the right element.

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;    
}
.left {
    width: 250px; 
    float: left; 
    height: 200px; 
    background-color: #0F0;
}
.right {
    width: 100%; 
    background-color: #F00; 
    height: 200px; 
}
<div style="width: 100%;">
    <div class="container">
        <div class="left">
            Left div<br />(fixed to 250px)
        </div>
        <div class="right">
            Right div<br />(width fit to blue area left)
        </div>
    </div>
</div>

Upvotes: 0

Mouser
Mouser

Reputation: 13304

This will do it. It uses calc (http://jsfiddle.net/vn84nm30/6/)

.right {
    width: calc(100% - 250px); 
    background-color: #F00; 
    height: 200px; 
    float: left;
}

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240978

You could simply add display: flex to the parent, .container element:

Updated Example

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;
    display: flex;
}

Alternatively, you could set the display of the parent, .container element to table, and then set the children elements to display: table-cell. If you want the children elements to respect the width, set table-layout: fixed on the parent element:

Alternative Example Here

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;
    display: table;
    table-layout: fixed;
}
.left {
    width: 250px;
    height: 200px; 
    background-color: #0F0;
    display: table-cell;
}
.right {
    width: 100%; 
    background-color: #F00; 
    height: 200px;
    display: table-cell;
}

Upvotes: 1

Related Questions