How to create fixed height 1st column layout?
I saw a kevinrose.com blog and i liked it, simple and clean layout, i wanted to use that layout so i was trying to create it but i stuck with this fixed height, i can easily set fixed bar like header, but column, i dont know how to do it
example:
#sidebar
{
background-color: red;
height: 700px;
width: 100px;
float: left;
}
#article
{
background-color: blue;
height: 400px;
width: 200px;
float: left;
}
#like
{
background-color: green;
height: 100px;
width: 200px;
position: fixed;
float: left;
z-index:-5;
}
Use position:fixed on the sidebar, and offset the rest using a margin
#sidebar
{
background-color: red;
width: 100px;
position: fixed;
}
#article
{
background-color: blue;
width: 200px;
margin-left: 100px;
}
Position fixed is how you achieve that. Have a look here: http://jsfiddle.net/wpHMA/
.wrap {
width:100%;
height:100%;
overflow:auto;
position:relative;
}
.sidebar {
background:#333;
color:#fff;
width:25%;
height:100%;
position:fixed;
top:0;
left:0;
}
.content {
width:75%;
float:right;
}
As per your given example "kevinrose.com" left panel is fixed position structure.
You can use following css/html code structure
Css
.leftPan{
width:27%;
background-color:#CCC;
position:fixed;
left:0;
min-height:100%;
}
.rightPan{
margin-left:27%;
height:1000px;
background-color:#999;
}
Html
<div class="leftPan">
Left Panel
</div>
<div class="rightPan">
Right Panel
</div>
here is jsFiddle File
Related
I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars
- a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)
I've seen many similar questions, but none of them seen to work with 3 columns.
I'm not sure, but I think it's something related to floating the columns of the content.
Here's the HTML code:
<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
<div id="column-left"></div>
<div id="content"></div>
<div id="column-right"></div>
</div>
<div id="footer"></div>
Here's the CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}
Here's an example of what's happening when I add some content:
http://jsfiddle.net/Lzp67xyu/
See this fiddle
Change positioning of #footer to relative and add clear:both to #footer.
That is, the CSS for #footer would be like
#footer {
clear: both;
position:relative;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
According to the docs
The clear property specifies on which sides of an element where
floating elements are not allowed to float.
Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.
.columnncontainer{
width:80%;
margin-bottom:50px;
background-color:yellow;
display:inline-block;
}
Here's a JSFiddle I came up with as example:
http://jsfiddle.net/y5xwop8h/1/
I'm having a small issue with my html layout .
When i have content - it works properly :
http://jsfiddle.net/exqofLft/
but when i have no content . the "wrap" height becomes 0 and the header and footer comes together.
e.g : http://jsfiddle.net/aqgo9370/
When there is no content or little content . i want the header at the top , followed by the full size wrap and the footer at the bottom of the page.
Any ideas how to do this ?
e.g :
CSS :
html, body
{
height:auto;
background-color:grey;
position:relative;
margin:0;
}
#header
{
position:absolute;
width:auto;
min-width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:auto;
min-width:100%;
height:auto;
background-color:blue;
margin:75px 0 0 0;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
}
By using vw/vh we can size elements to be relative to the size of the viewport. Add the below code in this id #wrap{}, Demo
min-height: 100vh;
You could use jquery for this.
var headerH = $('#header').height();
var footerH = $('footer').height();
var windowH = $(window).height();
$('#wrap').css({
'minHeight': (windowH - (headerH + footerH)) + 'px'
});
I made some changes in your html/css though.
Check the fiddle:
http://jsfiddle.net/skeurentjes/aqgo9370/9/
You can use box-sizing:border-box , and give it a padding to bottom , and top corresponding to footer and header respectively :
#header
{
top:0px;
position:relative;
width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:100%;
height:100%;
background-color:blue;
box-sizing: border-box;
padding-top: 75px;
padding-bottom:50px;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
bottom:0px;
}
Example
Js and position is not needed to Do this. Try this, This is Technically called Sticky footer
html, body {
height:100%;
background-color:grey;
margin:0;
}
#content {
float: left;
width: 100%;
min-height: 100%;
padding-bottom: 50px;;/*height of your footer*/
box-sizing: border-box;
}
#header {
width:100%;
height:75px;
background-color:yellow;
}
#wrap {
width:100%;
height:auto;
background-color:blue;
}
footer {
float: left;
width:100%;
height:50px;
background-color:black;
margin-top: -50px;/*height of your footer*/
}
<div id="content">
<div id ="header"></div>
<div id = "wrap"></div>
</div>
<footer></footer>
Use padding-bottom with desired height like
#wrap
{
padding-bottom:100%;/*or 50% or px value like 50px*/
}
html,
body {
height: auto;
background-color: grey;
position: relative;
margin: 0;
}
#header {
position: absolute;
width: auto;
min-width: 100%;
height: 75px;
background-color: yellow;
}
#wrap {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background-color: blue;
margin: 75px 0 0 0;
padding-bottom: 100%;
}
footer {
position: absolute;
width: auto;
min-width: 100%;
height: 50px;
background-color: black;
}
<div id="header">
<div>
<div id="wrap"></div>
<footer></footer>
It's working as it should. Elements always collapse to zero with no content. In order to achieve any height without content, you must assign a height value.
add Minimum height of wrap id
for example :
min-height:500px;
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}
Just tired up with the problem with 2 div aligning vertically. I tried horizontal scroll is appear in browsers, how to get rid of scroll?
I have this html:
<div id="responsive-admin-menu"></div>
<div id="content-wrapper"></div>
The css code is
#responsive-admin-menu {
width: 200px;
left:0px;
background-color: #404040;
height: 100%;
position: absolute;
min-height: 500px;
}
#content-wrapper {
position:absolute;
overflow:auto;
width:100%;
margin-left: 200px;
right:200px;
background-color: #fff;
padding: 15px;
}
I assume you want to create a two columns fluid layout, where you have your #responsive-admin-menu to the left and #content-wrapper to the right, and they fill the entire browser window.
In this case I suggest to define the width of both divs in percent and let them float one to the left and the other to the right:
#responsive-admin-menu {
width: 30%;
float:left;
}
#content-wrapper {
width: 70%;
float:right;
}
take a look here where I edited your code.
My Codepen
Use left/top/right/bottom for to give "anonymous" width and height.
Your CSS
#responsive-admin-menu {
position: absolute;
width: 200px;
left:0px;
top:0px;
bottom:0px;
background-color: #404040;
min-height:500px;
}
#content-wrapper {
position:absolute;
overflow:auto;
top:0px;
left:200px;
right:0px;
background-color: green;
padding: 15px;
}