CODEWITHSUNDEEP
htmlcsslayout
Asa Carter
Asa Carter

Reputation: 2225

Fluid Fixed Content

What's missing to make this fluid-fixed layout work?

HTML:

<div class="header">
    <div class="title">Title</div>
    <div class="options">Opt</div>
</div>

CSS: 

.header{margin:0;padding:0;}
.title{margin-right:50px;}
.options{float:right;width:50px;position:relative;top:0;left:auto;}

DEMO: http://jsfiddle.net/7Sdq6/

The link below works but I can't figure out what is missing for the above example to work.

http://jsfiddle.net/andresilich/6vPqA/13/show/

EDIT: I can position .options absolutely but I have a dropdown within that and I do not want the dropdown's position to be positioned relatively to .options

Upvotes: 0

Views: 36

Answers (3)

Asa Carter
Asa Carter

Reputation: 2225

I figured it out..

The fixed content needs to be before the fluid content in the HTML:

<div class="header">
    <div class="options">Opt</div>
    <div class="title">Title</div>
</div>

http://jsfiddle.net/7Sdq6/5/

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11496

Demo

just add

display:inline-block;

Instead of margin-right: 50px use width: calc(100% - 50px)

Demo

css

.header {
    width:400px;
}
.title {
    width: calc(100% - 50px); /* takes the width of the parent and we substract the width of the right floated div from it instead of using margin-right */
    background: red;
    display: inline-block;
}
.options {
    float:right;
    width:50px;
    background: blue;
}

Upvotes: 1

yevgeniy
yevgeniy

Reputation: 778

As I understand you need to achieve a fixed title with fluid options, so you need to use this CSS

CSS

.title {
    margin:0 50px 0 0;
    float:left;
    width: 400px /*your width*/
}
.options {overflow:hidden}

Upvotes: 0

Related Questions