CODEWITHSUNDEEP
csscss-float
Canttouchit
Canttouchit

Reputation: 3159

Full height sidebar and full height content, fluid layout

Possible duplicate didn't help

I know there are many answers about this topic but neither of them helped me and I spent days on this problem. 90% of the answers and books give this background trick which didn't help me.

My code - Plunker

HTML

<body >
<h1>Hello Plunker!</h1>

<div class="sidebar">
  <ul>
        <li><a href="#">ANALYTICS</a></li>
        <li><a href="#">STYLES</a></li>
        <li><a href="#">VOTERS</a></li>
        <li><a href="#">GET STARTED</a></li>
        <li><a href="#">UPDATE</a></li>
  </ul>
</div>
<div class="content">
  <p>Content</p>
</div>

CSS

body{
  width: 100%;
  margin: 0 auto;

}

.content {
  width: 95%;
  display: inline;
  float: left;
  background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}

.sidebar{
  width: 5%;
  display: inline;
  height: 100%;
  float: left;
  background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;

}

.sidebar ul{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

}

.sidebar li{
     padding: 50%;
     position: relative;
}

.sidebar a{
        display: block;
        font-size: 0.5em;
        position: absolute;
        bottom: 0;
        left: 0;
}

Right now my layout looks like this:

Right now my layout looks like this:

And I want it to look like this:

I followed this guide offered in the possible duplicate and it didn't help I think this is because I'm using floats and fluid layout.

How can I extend the columns while keeping the fluid layout and the float positioning.

Upvotes: 10

Views: 70465

Answers (2)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

I've updated your code. Check out it on Plunker.

At first try to not use absolute or relative positions, if there is no need of them.

The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.

Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.

And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.

Upvotes: 10

Danield
Danield

Reputation: 125443

Try something like this:

FIDDLE

Markup:

<h1>Hello Plunker!</h1>
<div class="container">       
    <div class="sideBar">sideBar</div>
    <div class="content">content</div>
</div>

CSS

*
{
    margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
    height: 100%;
}
h1
{
    height: 50px;
    line-height: 50px;
}
.container
{
    margin-top: -50px;
    padding-top: 50px;
    box-sizing: border-box;
}
.sideBar
{
    float:left;
    width: 100px;
    background: aqua;
}
.content
{
    overflow:hidden;
    background: yellow;   
}

Upvotes: 5

Related Questions