I'm trying to create a layout for a page like this with a full height left close bar. I keep running into the left close bar either pushing everything down or is limited to only the top left corner:
I think you want something like that.
body {margin:0;}
.side {
position: fixed;
background: blue;
top: 0;
left: 0;
bottom: 0;
width: 100px;
}
.content {
padding-left: 100px;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.top {
height: 100px;
width: 100%;
background: orange;
float: left;
}
.left, .right {
width: 50%;
height: 200px;
float: left;
}
.left {
background: green;
}
.right {
background: magenta;
}
<div class="side"></div>
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
If you want to make the sidebar full height you can use
.sidebar{
height:100vh;
}
and then you can give position:fixed;
Related
Is it possible, to fix a div bar at the top of the page even when scrolling, and
still be able to fully see the next div?
The bar div is given a height of 15vh and the other divs are set to 85, so when You see the first view of the page divs #bar and #one are displayed.
I would like that after scrolling down that divs #bar and #two are seen. I tried everything: giving margin, padding, position relative, absolute, adding to #one top: 15vh;. Tried also putting div on #one and #two divs.. made all combinations..
This is the code I have so far that is the closest to what I mean and can't find how to go futher
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Add padding-top:15vh; to #one to create/add the part which is hidden behind the fixed navbar
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
padding-top:15vh;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
I need to display the main part of the page to cover the rest of the screen without the header.
The L and R part should be 50% of the page width (having a possible padding), and also 100% of the main height (that is, the rest of the screen)
+-----------------------+
| header |
+-----------------------+
| | |
| L | R | } main
| | |
+-----------------------+
| footer |
+-----------------------+
Here is my code jsfiddle:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 10px;
/* changeable */
box-sizing:border-box;
background-clip: content-box;
}
main div {
padding: 10px;
height: 100%;
background-clip: inherit;
/* changeable */
width:30%; /* to set=50% */
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
PS.
I need to be compatible with "IE9 +" (so flexbox is not compatible)
The result at the first page load should be like in the following image:
Since the height of the header is known, you can use absolute positioning
header, main, footer {
position: absolute;
left: 0;
right: 0;
}
header {
top: 0;
height: 50px;
background-color: orange;
}
main {
top: 50px;
bottom: 0;
}
.left, .right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.left {
left: 0;
background-color: yellow;
}
.right {
right: 0;
background-color: red;
}
footer {
top: 100%;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
The issue you are having is with the padding of the div's in the main container. with a little re-factoring of your css I've managed to get it to not over lap.
Here's demo: http://jsfiddle.net/h1tz5h8q/2/
main {
background-color: green;
height: 100%;
margin:0;
padding: 1%;
}
main div {
padding: 0px;
height: 100%;
background-clip: inherit;
width:49%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
float: right;
}
Pure CSS solution, Totally responsive, Without fixing any height (header or footer)
Here's the Demo
The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)
<div class="Container">
<div class="Header">
<h1>Header</h1>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Table">
<div class="Column C1">
</div>
<div class="Column C2">
</div>
<div class="Column C3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The column width may be fixed, or not.. to you're will.
P.S:
this is an old answer of mine, that have 3 columns in it, but you can change it to 2 without any problem.
Add your left and right sections to wrapper divs to handle the 50% width and padding.
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 10px;
/* changeable */
box-sizing:border-box;
background-clip: content-box;
}
main .left, main .right {
padding: 0 10px;
height: 100%;
background-clip: inherit;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
.wrapper {
width: 50%;
float: left;
height: 100%;
}
footer {
display: block;
margin-top: 10px;
}
<div class="wrapper">
<div class="left">50% width, 100% main height left</div>
</div>
<div class="wrapper">
<div class="right">50% width, 100% main height right</div>
</div>
please try this one:
Demo
Css code:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 2%;
}
main div {
padding: 0px;
height: 100%;
background-clip: inherit;
width:49%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
float: right;
}
One of the not very elegant, but functional examples I got to manage is the one using the css height: calc(100% - 50px); function for the main element:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: calc(100% - 50px);
width: 100%;
margin: 0;
float: left;
padding: 5px;
box-sizing:border-box;
background-clip: content-box;
}
main div {
padding: 10px;
height: 100%;
background-clip: content-box;
box-sizing:border-box;
width:50%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
And here is the corresponding JSFiddle.
The downsize, is that I
have to use a fixed header height;
have to use twice this header (I think to solve this using LESS file instead of the CSS one...).
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable 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%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin 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;
}
i've done this on my layout and it works fine for me
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%;
}