CODEWITHSUNDEEP
htmlcssfluid-layout
Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

Responsive Web Design Align fluid and fixed Divs

<div id="headerText">
 <h1>Ur Title</h1>
</div>
<div id="headerIcon">
 <div id="icon">
  <div class="icon-list"></div>
  <div class="icon-list"></div>
  <div class="icon-list"></div>
 </div>
</div>

I want to align both the headerText and headerIcon side by side.
- headerIcon is fixed with size like 30px.
- headerText will expand the remaining width.

I've tried calc, it is working fine but I heard that calc is not supported in some android platforms.

Upvotes: 1

Views: 112

Answers (3)

Roy Sonasish
Roy Sonasish

Reputation: 4599

you can achieve the result by following structure.

keep your #headerIcon first with float:right style and then #headerText 

<div id="headerIcon">
 <div id="icon">
  <div class="icon-list">1</div>
  <div class="icon-lienter code herest">2</div>
  <div class="icon-list">3</div>
 </div>
</div>    
<div id="headerText">
 <h1>Ur Title</h1>
</div>

working jsFiddle File

Upvotes: 1

Top Questions
Top Questions

Reputation: 1852

A solution in jQuery would be:

function alignWidth(){
var windowWidth = $(window).width();
var iconwidth= $('#headerIcon').width();

var newWidth= windowWidth-iconwidth;

$('#headerText').css('width', newWidth);
}

$(document).ready(function(){
    alignWidth();

    $(window).on('resize',function(){
            alignWidth();
        });

)};

Not tested...but should work if you can go for a jQuery solution...

Upvotes: 0

qtgye
qtgye

Reputation: 3610

You could try wrapping them in a div and make use of table display:

sample

.wrap {
    display: table;
    width: 100%;
}
#headerText, #headerIcon {
    display: table-cell;
}
#headerIcon {
    background: red;
    width: 30px;
}
#headerText {
    background: silver;
}

Upvotes: 0

Related Questions