Menu
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:
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.
495
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.
104
Try something like this:
FIDDLE
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
*
{
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
