How can i have a fixed header with a vertical scroll-bar for my each column.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">Title 1</div>
<div class="col-sm-4">Title 2</div>
<div class="col-sm-4">Title 3</div>
</div>
</div>
Below is my css...
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:#e5e5e5;
}
.container {
display:table;
width: calc(100% - 260px);
border-spacing:1.5em;
}
.row {
display:table-row;
}
.col-sm-4 {
display:table-cell;
background:white;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
}
.secondary-aside{
width:260px;
background-color:#E1E1E1;
height:100%;
right:0px;
position:fixed;
}
Below is my codepen
http://codepen.io/anon/pen/lqfxt
The overflow property only applies to block and inline-block elements. In order to show the scroll bar, you'll need to change the display property from table-cell to one of the two aforementioned display properties, and then add an overflow property. You'll also need to set a specific width/height in this case.
In order to fix the header to the top, simply apply position: absolute; to the header element and give your columns a margin-top to equal the header height:
.col-sm-4 {
display: inline-block;
width: 150px;
height: 600px;
background:white;
overflow-y: visible;
margin-top: 60px;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
position: absolute;
}
Example CodePen
Related
I have problems placing a div within another div which has a defined height of lets say 400px.
When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?
body {
min-width:300px;
}
.header {
background-color:pink;
width:100%;
height:400px;
}
.menu {
background-color: red;
}
.header-container {
color:white;
background-color:gray;
height:100%;
max-width:400px;
margin:auto;
}
.headline {
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
.clearfix {
clear:both;
}
<div class="header">
<div class="menu">
menu
</div>
<div class="header-container clearfix">
<div class="headline">
<span>das ist mein blog</span>
<span>this is the underline</span>
</div>
</div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>
https://jsfiddle.net/g9ec4nw8/
Because the the padding on the .header-container is causing an overflow.
Adding box-sizing: border-box; to your .header-container, will fix the box-sizing issue.
But not only that, you haven't taken into account the 18px of height by your .menu.
In full, by changing your .header-container to the following code:
.header-container {
color:white;
background-color:gray;
height:calc(100% - 18px);
max-width:400px;
box-sizing: border-box;
margin:auto;
top:0;
bottom:0;
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
Will fix the issue.
Fiddle Here.
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I have two divs inside a parent div.
both divs will occupy complete width of its parent.
first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].
below is jsfiddle link:
http://jsfiddle.net/x3ebK/3/
here is the html code:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
I need help in this.
I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div
http://jsfiddle.net/x3ebK/32/
It is convenient to use display:table rather than float like this:
DEMO : http://jsfiddle.net/x3ebK/28/
HTML:
<div id="content">
<div>
<div id="col1">content</div>
<div id="col2">content<br /><br /><br />content</div>
</div>
</div>
CSS:
#content {
height:auto;
position: relative;
width:300px;
background:#ccc;
color:#fff;
display:table;
}
#content > div{
display:table-row;
}
#col1 {
width: 30%;
background:#ff0000;
display:table-cell;
}
#col2 {
width: 70%;
background:#000fff;
display:table-cell;
}
You might want to read this article :
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Hope this helps.
Is this what you are trying to achieve?
Have a fiddle!
CSS
html,body { height: 100%; }
#content {
height:100%;
position: relative;
width:300px;
float:left;
background:#ccc;
color:#fff;
}
#col1 {
width: 30%;
background:#ff0000;
float:left;
height:50px;
}
#col2 {
width: 70%;
float:right;
background:#000fff;
height:100%;
}
Try applying:
position: absolute; and height: 100%; to #col1
and
height: 100%; to #col2
Here is the updated fiddle: http://jsfiddle.net/nqYAp/
Try This#container{ height:100%}#col2{ height:inherit}
I am trying to get three divs lined up beside each other. the left div has a fixed width, the middle has a percent width, and the third should take up the remaining space. Here is the code I have come up with:
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
background-color:#CCC;
height:40px;
}
I have made the two left divs transparent so you can see that the background of the right div extends all the way to the left of the page. How can I fix this? I have tried floating the right div however it doesn't fill the rest of the space. here is a fiddle I used.
The easiest solution would be to just wrap the 3 div Elements in a container, like this:
<div id="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
And then just make the child elements display: table-cell and the parent display: table and width: 100%.
#left, #middle, #right {
display: table-cell;
}
#container {
display: table;
width: 100%;
}
I order to force the #left Element to keep it's width even when there is very little space, I'd suggest to also add min-width: 200px to it's CSS.
Demo: http://jsfiddle.net/eMbV7/11/
S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.
Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#container {
width: 100%;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float:left;
background-color:#CCC;
height:100px;
width:calc(45% - 200px);
}
Demo: http://jsfiddle.net/eMbV7/9/
Use this code, I have wrapped all div in a container div.
<div class="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
& css
.container{
display:block;
padding:0 0 0 200px;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
margin:0 0 0 -200px;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float : right;
width: 45%;
background-color:#CCC;
height:40px;
}
Here is jsFiddle link DEMO
I have an aside (sidebar) and I'm trying to break it up into 3 sections equally.
Here's what it looks like:
This is my html:
<aside id="sidebar">
<div id="side_events">
Events
</div>
<div id="side_trailer">
Trailer
</div>
<div id="side_advertisement">
Advertisement
</div>
</aside>
This is the majority of my CSS:
* {
margin: 0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
body{
width: 100%; /*always specify this when using flexBox*/
height:100%;
display: -webkit-box;
text-align:center;
-webkit-box-pack:center; /*way of centering the website*/
background-image:url('bg2.jpg');
}
#wrapper{
max-width: 850px;
display: -webkit-box; /*means this is a box with children inside*/
-webkit-box-orient:vertical;
-webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
background-color: #B137D6;
}
#body_div{
display: -webkit-box;
-webkit-box-orient:horizontal;
color:#000000;
}
#main_section{
border:1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding: 3px;
}
#sidebar{
width: 210px;
height: 100%;
margin: 20px;
padding: 0px;
background: #999999;
border:#FF0000 1px solid;
}
#side_events,
#side_trailer,
#side_advertisement{
height:33.333%;
}
#side_events{
background:#102A50;
display:block;
}
#side_trailer{
background:#173B72;
display:block;
}
#side_advertisement{
background:#296CD0;
display:block;
}
You just need to set the #sidebar childs height to 100%/3 = 33.333%, but to achieve this you need also to set html and body tags height to 100%:
body,
html {
height: 100%;
}
#side_events,
#side_trailer,
#side_advertisement{
height:33.333%;
}
Most of the time you have to apply a 100% height to the parent DIV to get this working.
Your height of your parent element is auto and the child elements are 100%. So you need to define the parent element height in order for the child elements to be defined as 100%.
You parent element (#sidebar) has 100% height.
I wrote a jsfiddle so you could see my point of the 100% height on the parent element. The parent element is set to 100% but has nothing to derive 100% from. So I set the container in the example to a define height. http://jsfiddle.net/rtLeM/
<!-- HTML -->
<div id="container">
<aside id="sidebar">
<div id="side_events">
Events
</div>
<div id="side_trailer">
Trailer
</div>
<div id="side_advertisement">
Advertisement
</div>
</aside>
</div>
/* CSS */
#container{
height:300px;
}
#sidebar{
width:150px;
height:100%;
}
#side_events{
height:33%;
width:100%;
display:block;
background-color:#555;
}
#side_trailer{
height:33%;
width:100%;
display:block;
background-color:#999;
}
#side_advertisement{
height:33%;
width:100%;
display:block;
background-color:#333;
}