CODEWITHSUNDEEP
csswordpressresponsive-designcontainersfluid-layout
András Hári
András Hári

Reputation: 13

CSS responsive layout, with elements fluid and fixed

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%;
}
#container {
    height: auto;
    overflow: hidden;
}

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

#content {
    float: none;
    background: #434343;
    width: auto;
    overflow: hidden;
}

Upvotes: 0

Views: 322

Answers (1)

Jrn
Jrn

Reputation: 1235

You can scale images fluidly with CSS like so:

img {
  width: 100%;
  height: auto;
}

Upvotes: 1

Related Questions