CODEWITHSUNDEEP
htmlcssresponsive-design
Daniel Sitarz
Daniel Sitarz

Reputation: 300

CSS shrink element without causing jump to next line

I want to shrink red element and have blue element at the fixed width in the right place.

Look at the example: http://jsfiddle.net/YUTFc/

<div class="wrapper">
   <div class="red">1</div>
   <div class="blue">2</div>
</div>

.wrapper{
    max-width: 300px;
    height: 100px;
    margin: 0 auto;
}

.red{
    height: 100%;
    width: 80%; 
    background-color: red;
    float: left;
}

.blue{
    height: 100%;
    width: 60px;
    background-color: blue;
    float: right;
}

And resize the window.

What can I do? Thank you.

Upvotes: 0

Views: 192

Answers (2)

cimmanon
cimmanon

Reputation: 68329

If your content is going to be unpredictably sized, turning your elements into table elements via CSS is going to be your best bet.

http://jsfiddle.net/YUTFc/2/

.wrapper{
    display: table;
    max-width: 300px;
    height: 100px;
    margin: 0 auto;
}

.red{
    height: 100%;
    width: 80%; 
    background-color: red;
    display: table-cell;
}

.blue{
    height: 100%;
    width: 60px;
    background-color: blue;
    display: table-cell;
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Try this:

.wrapper {
    max-width:300px;
    height:100px;
    margin:0 auto;
    position:relative;
}
.red, .blue {
    position:absolute;
    top: 0; bottom: 0;
}
.red {
    background-color:red;
    left:0; right:60px;
}
.blue {
    background-color:blue;
    width:60px; right:0;
}

Updated Fiddle

Upvotes: 1

Related Questions