Geek asks and answers

CSS holy grail - problem with 2 fixed / 1 fluid

Well, that’s why I worked on implementing the Holy Grail style layout for my site while it’s pretty close, but I noticed two things that I want to fix.

The goal is a “sticky” footer with an increase in page length with the height of the browser window, a header and three columns. 2 fixed columns on the left and right side and a liquid column in the middle.

The problems I am having is that right now, my center “liquid” column does not seem to work as I expected. Basically, I want the fixed columns to always be fully shown, and the center column filling the remaining horizontal space. But the center column takes up a lot of space and makes it so that I need to scroll to view the right column (see image below). In addition, the text-align: center code is not the centering text within the viewing area of ​​the center column. Any help appreciated!

image: http://i.imgur.com/FPuSiIu.png

html:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="test.css" />
    </head>
    <body>
        <div id="header">
            <p>Header</p>
        </div>
        <div id="container">
            <div id="center">
                <p>Content</p>
            </div>
            <div id="left">
                <p>Content</p>
            </div>
            <div id="right">
                <p>Content</p>
            </div>
        </div>
        <div id="footer">
            <p>Footer</p>
        </div>

    </body>
</html>

CSS

* {
    margin: 0;
}

#container {
    width:100%;
}

#header {
    text-align: center;
    background: #5D7B93;
    height: 95px;
    padding: 5px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15;
}
#center{
    text-align: center;
    margin-top: 105px;
    background: red;
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}
#left {

    height: 100%;   
    width: 150px;
    text-align:center;
    background:#EAEAEA;
    margin-top: 105px;
    margin-left: -100%;
    overflow: scroll;
    position: relative;
    float: left;
}

#right {
    position: relative;
    height: 100%;
    width: 150px;
    margin-right: -100%;
    margin-top: 105px;
    background: blue;
    text-align: center;
    float: left;
}
#footer {
    text-align:center;
    background: #5D7B93;
    height:25px;
    padding:5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
+5
source share
2 answers

No need float. Just position: absolutesidebars and give a fixed edge to the center of the div on both sides.

JSFiddle

CSS

#container{
    position: relative;
}

#left, #right {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
}

#left {
    left: 0;
}

#right {
    right: 0;
}

#center {
    margin: 0 200px;
}
+4

,

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container{
  display: inline-flex;
  width: 100%;
  height: 100%;
  background: lightblue;
}

#left {
  width: 240px!important;
  min-width: 240px!important;
  background: red;
  height: 100%;
}

#right {
  width: 400px!important;
  min-width: 400px!important;
  background: red;
  height: 100%;
}

#center {
  background: blue;
  width: 100%;
  min-width: 600px;
  height: 100%;
}
0

More articles:


All Articles