Fluid Width Fixed Position

How to use fixed position in fluid layout

This is possible without JS. Here's my approach.

Basically, you'd want to setup your containing div, then clone it and set it within a div dedicated to position: fixed; that way the cloned container within the fixed div will share the same styles as your actual containing div and scale accordingly.

<div class="ads"> <!-- Dedicated position: fixed; -->
    <div class="wrap"> <!-- Cloned container for positioning of Ads -->
        <img src="http://placehold.it/100x750&text=Ad1" />
        <img src="http://placehold.it/100x750&text=Ad2" /> 
    </div>
</div>

<div class="wrap"> <!-- Main container with a z-index of 1 -->
    <img class="main" src="http://placehold.it/960x300" />
</div>

Once that's in place, you can position your "ads" accordingly within the fixed div, and position them outside of the responsive / fixed container so they adhere to it - giving the illusion that they're adhering to your actual wrapper. And after your max-width is reached the fixed ads will be pushed out of the viewport.

http://jsfiddle.net/m0v3vqcp/ - Fiddle

Full Screen /
With Their Ads

Fixed width element taking its fluid parents size?

This "works" fine if your parent div is the same width as the body. Of course, it is only working in appearance, not reality. This div takes 30% of the browser's width, like its parent div.

html, body {    margin: 0;}
.container {    width: 30%;    height: 400px;    background: linear-gradient(green, white)}
.fixed {    position: fixed;    background: red;    width: inherit;    height: 10px;}

<div class="container">    <div class="fixed"></div></div>

Fixed width absolute sidebar with fluid content

Demo

css

#sidebar {
    position:fixed;
    height:100%;
    width: 300px;
    background-color: #ccc;
    overflow-y: auto;                   
}
#contentWrapper { /* not using margin */
    box-sizing:border-box;
    background-color:#eee;
    position:absolute;
    left:300px;
    width:calc(100% - 300px);
    min-height: 100%;
}
#contentWrapper { /* using margin */
    box-sizing:border-box;
    background-color:#eee;
    margin-left: 300px;
    /*position:absolute;
    left:300px;
    width:calc(100% - 300px);*/
    min-height: 100%;
}

html,body,#page {
    width: 100%;
    height: 100%;
}

Fluid width block element links in fixed position footer

The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.

Add the following CSS to #footer:

bottom: 0;
height: 90px;

Add the following CSS to A:

height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */

Remove div.content. It doesn't seem necessary here.

Edit

You can center the footer by adding/changing the following CSS on #footer:

width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */

Edit

You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:

#footer {
    position: fixed;
    width: 100%;
    max-width: 640px;
    height: 114px;
    bottom:0;
    left: 50%;
    margin-left: -320px;
}

@media only screen and (max-width: 640px) {
    #footer {
        margin-left: auto;
        left: 0;
    }
}

---

Related Topics