CODEWITHSUNDEEP
htmlcssresponsive-design
Lir An
Lir An

Reputation: 553

make this fluid div next to a fixed div without using float?

I have this code below which is making a fluid div next to a fixed div,

is there a way to get this same result without using float?

<div id="wrapper" style="width: 100%">
  <div id="left" style="background-color: Blue; height: 100px; float: right; width:     200px;margin-left:10px;"></div>
  <div id="right" style="background-color: #5a71e5; height: 100px; margin-right: 210px;">
</div>

jsfiddle:

http://jsfiddle.net/3P9XN/4/

Upvotes: 0

Views: 1182

Answers (3)

Learner
Learner

Reputation: 4004

Not sure if you are open to using jQuery. If yes, here's what you can do:

Get Rid of all the floats, add display:inline-block to the wrapper div, use jQuery to calculate the difference between total wrapper width minus left div width and set that to right div.

HTML

<div id="wrapper">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

CSS

#left{
    background-color: Blue; 
    height: 100px; 
    width: 200px;
    margin-left:10px;
}

#right{
    background-color: #5a71e5; 
    height: 100px; 
}

#wrapper div {
    display: inline-block;
}

#wrapper{
    width:100%;
}

jQuery

$('#right').width($('#wrapper').width() - $('#left').width() - 20);

Sample Fiddle: http://jsfiddle.net/3P9XN/12/

Update

Added window resize detection for responsiveness

http://jsfiddle.net/3P9XN/14/

Update2

Updated the solution as per Marc's suggestions, now getting outerWidth and css margin values through script. More dynamic and cleaner approach.

jQuery

 $(document).ready(setRightWidth);

 $(window).resize(setRightWidth);

 function setRightWidth(){
        var leftmargin = parseFloat($('#left').css('margin-left'));
        var width = $('#wrapper').outerWidth(true) - $('#left').outerWidth(true) - leftmargin;
        $('#right').width(width);
 }

http://jsfiddle.net/3P9XN/17/

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

You could always try absolute positioning since you have a pretty well defined height and widths.

#wrapper {
    width: 100%;
    height: 100px;
    border: 1px dotted gray;
    position: relative;

}
#left {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: blue;
}
#right {
    position: absolute;
    left: 0;
    right: 210px;
    top: 0;
    bottom: 0;
    background-color: #5a71e5;
}

The HTML remains the same... minus the inline styles of course.

Demo fiddle: http://jsfiddle.net/audetwebdesign/QypQG/

Upvotes: 0

Matyas
Matyas

Reputation: 13702

Here inline-block is not an option since you cannot make the container on the left take up "as much space" as there is available.

If you don't want to use float (and suppose js is too much) I would call for the last resort:

<table/> - [dramatic ta -ta -ta -taaaaaa]

Where you meet a scenario where some elements should be fix sized and other should just take up as much as there is for them, then if you think of it this is what tables basically do. I know we've been booed away a lot of times from using tables for layouting, but if the behavior requires it, than let's not go and create complex workaround, but use something that behaves as we expect them to behave.

On the other hand tables are a big no-no for responsive design.

DEMO

HTML 

<table class="wrapper">
    <tbody>
        <tr>
            <td class="left"></td>
            <td class="right"></td>
        </tr>
    </tbody>
</table>

CSS

.wrapper {
    width: 100%;
}
.right {
    background-color: Blue;
    height: 100px;
    width: 200px;
}
.left {
    background-color: #5a71e5;
    height: 100px; 
}

Upvotes: 1

Related Questions