CSS responsive layout, with elements fluid and fixed

[Hplatini89]

Hello World!

I need a bit help, I am developing a custom theme for WordPress: http://bjorn.flabifitness.hu/

I need a fixed header, footer, menu area. And a fluid content area with page content (an image).

During browser window size is changing, only the content need to be changed/adjusted to view-size, without scrollbar, and if the picture is bigger than the browser window, or the monitor, it should be adjusted to the size of browser-window. (fluid)

Header, footer, and menu (vertical position) should be at the same place. (fixed)

This is my CSS-code for now: (main: all of page, inside header, container(sidebar, content), footer)
`

main {

position: absolute;
background-color:#434343;
z-index:0;
display: block;
opacity: 0;
top:0px;
left:0px;
width:100%;
height:100%;
text-rendering: optimizeLegibility;

}

header {

background: #1d1d1d;
margin: 0;
padding-top: 15px;
padding-left: 35px;
padding-bottom: 13px;
min-width: 100%;
margin:0px auto;

}

footer {

clear: both;
min-width: 100%;

}
/* two columns*/
.container {
height: auto;
overflow: hidden;
}

.sidebar {
width: 242px;
float: left;
background: #434343;
min-height: 92%;
}

.content {
float: none; /* not needed, just for clarification /
background: #434343;
/ the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
`

[Paulie_D]

Perhaps you could put something in Codepen for us to play with.

[Hplatini89]

Ok, thanks! :)

so the main point is:

image should be resized only, and other elements should be sticked to the image container.

http://codepen.io/anon/pen/JoseB

[Paulie_D]

Is the image there for Content purposes or Styling?

[Hplatini89]

for content purposes, this would be all the content (in content area)

[Paulie_D]

I stripped out all of the images into the background and I think I’m mostly there.

http://codepen.io/Paulie-D/pen/spHLd

[Paulie_D]

I checked, now content area is adjusted by vertical resize.

The image gets smaller as you narrow the window doesn’t it?

You can’t keep the footer at the bottom of the page at all times AND have the image fill the rest of the content area exactly unless it distorts to do so.

[Hplatini89]

Yes, your solution is perfect, and I need the same horizontally and vertically together. just like here: http://www.caesarlima.com/

[Paulie_D]

So it’s perfect..or isn’t it, I’m confused?

I’m pretty sure you can’t be responsive BOTH ways without distorting the image..unless there is something else going on.

[Hplatini89]

In this site, can You guess, what they use?:

http://www.caesarlima.com/

It is cropping the images, but I cannot extract the appropriate CSS.

[Author]

Posts