The idea is to have the banner and nav bar stuck to the top of the browser window which i don't want to scroll and the content underneath being able to scroll. The two sections of contentleft and contentright I want to have the same height even if the content isn't as big.
#charset "utf-8";
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
height: 125px;
background-color: #034569;
position: relative;
top: 0px;
}
.nav {
width: 100%;
height: 50px;
background-color: #235B79;
}
.contentwrapper {
width: 100%;
background-color: #aaaaaa;
position: fixed;
top: 175px;
overflow-y: scroll;
}
#contentleft {
width: 25%;
height: auto;
background-color: #034569;
float: left;
}
#contentright {
width: 75%;
height: auto;
background-color: #ffffff;
float: right;
}
For your css you need the banner and nav bar to have the position:fixed property, which will prevent scrolling. If .contentwrapper has a static height declared we can make the div elements inside fill the height with height:100%;. Also we can assign html and body a height: html, body: height:100%;.
#charset "utf-8";
body, html {
margin: 0px;
padding: 0px;
height:100%;
}
.banner {
width: 100%;
height: 125px;
background-color: #034569;
position: fixed;
top: 0px;
}
.nav {
width: 100%;
height: 50px;
position: fixed;
top: 125px;
background-color: #235B79;
}
.contentwrapper {
width: 100%;
background-color: #aaaaaa;
padding-top: 175px;
height:300px;
overflow-y: scroll;
}
#contentleft {
width: 25%;
height: 100%;
background-color: #034569;
float: left;
}
#contentright {
width: 75%;
height: 100%;
background-color: #ffffff;
float: right;
}
Related
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
I have in my design a fixed head and sidebar and in the content area which is able to scroll I have a 3 column layout.
Now I want the 2 sidebars in my content area scrolling when there is enough content but then when its at bottom then the sidebars should be fixed and only the content in the middle should then scroll.
Here for a better understanding a high quality concept
.
Is this possible without JS and if yes how ?
Thanks for every help :)
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
overflow-y: scroll;
padding-bottom: 10px;
}
.one {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100px;
float: left;
padding-top: 10px;
background:green;
}
.three {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:orange;
}
.clear {
clear:both;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
</div>
If you the remove padding from your three colomns, add a child div to each for padding, give them a height of 100%, an overflow-x of scroll and give content a fixed position, all 3 columns will have a height of 100% and scroll independently.
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
top: 0px;
left 0px;
position: fixed;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
height:100%;
max-height:100%;
min-height:100px;
}
.one {
width: 22%;
min-width: 150px;
float: left;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100%;
float: left;
background:green;
}
.three {
width: 22%;
min-width: 150px;
float: left;
background:orange;
}
.column {
height:100%;
max-height:100%;
min-height:100px;
overflow-x: scroll;
}
.column .inner {
padding-top: 10px;
}
.clear {
clear:both;
}
I need help to make these two <div>'s (#side-nav and #content-wrapper) to scroll independently,
HTML:
<div id="wrapper">
<div id="top-nav">
Top nav
</div>
<div id="side-nav">
<ul>
<li>Thing</li>
<li>Thing</li>
</ul>
</div>
<div id="content-wrapper">
<!-- Ton of conent here -->
</div>
</div>
CSS:
#wrapper {
width: 100%;
background-color: #fff;
}
#top-nav {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: green;
}
#side-nav {
position: fixed;
width: 250px;
height:100vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
}
now if I scroll the #side-nav to the end or top, #content-wrapper will scroll too. #side-nav has to stay full-page height and fixed even if there is not that many <li>'s.
I've quickly made pen here:
http://codepen.io/blizqery/pen/QbZzRN
Thanks!
Check this: http://codepen.io/anon/pen/xGyMjM
You need to set height to content-wrapper, and also set the left, right & top.
#side-nav {
position: fixed;
width: 250px;
height:100vh;
left: 0;
right: 0;
overflow-y: scroll;
background-color: red;
top: 60px;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
position: fixed;
left: 0;
top: 0;
height:100vh;
background-color: blue;
}
I believe this works for your issue
body{
margin:0px;
}
#top-nav {
position: fixed;
top: 0;
height: 10vh;
width: 100%;
background-color: green;
}
#wrapper {
width: 100%;
background-color: #fff;
}
#side-nav {
float:left;
width: 250px;
height: 90vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 10vh 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
height:90vh;
}
Trying to make my portfolio, and new to webdesign. I am trying to add navigation links but the last link goes to next line. Don't know why is it so?
I want in single line, and if even there is some different method to represent this pl. help me/guide me for that too.
Thank You!
My Demo
CSS & HTML
html,
body {
margin: 0%;
top: 0%;
}
body {
background: #2f233d;
overflow: hidden;
}
header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 12%;
background: #333;
font-family: Agenda Medium, Sans-Serif, Arial;
font-size: 20px;
}
header img {
display: inline;
width: 227px;
height: 100px;
margin-left: 2%;
}
header .links {
display: inline-block;
position: absolute;
bottom: 10%;
}
header a {
border: 1px solid #ddd;
padding: 1%;
text-decoration: none;
color: #ccc;
}
footer {
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 10%;
background: #ccc;
}
aside {
position: fixed;
top: 12%;
left: 0%;
width: 20%;
height: 78%;
background: #f2f1f1;
overflow-y: auto;
}
section {
position: fixed;
top: 12%;
left: 20%;
width: 82%;
height: 78%;
background: #fff;
overflow-y: scroll;
}
<header>
<img src="Logo.png" alt="logo" />
<span class="links">
Home
About
Gallery
Work
Contact
</span>
</header>
<footer></footer>
<aside></aside>
<section></section>
You need to define your widths. Currently width is dependent on the length of the word.
Here is one of many solutions, this one being very straightforward.
header img {
width: 15%;
}
.links {
width: 80%;
}
I shaved a bit off to account for margins and paddings. The important thing here is I'm defining the image's width in percent instead of pixels, and I'm defining the width of .links, and not just the children of it.
In honesty, your solution is going to need to be more complex. It needs to account for mobile devices, because a small screen will cause the words to overflow their border. This, however, should answer your immediate question.
fiddle
For header a and header .links to changes in CSS..
demo:
html,
body {
margin: 0%;
top: 0%;
}
body {
background: #2f233d;
overflow: hidden;
}
header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 12%;
background: #333;
font-family: Agenda Medium, Sans-Serif, Arial;
font-size: 20px;
}
header img {
display: inline;
width: 227px;
height: 100px;
margin-left: 2%;
}
header .links {
display: inline-block;
position: absolute;
bottom: 10%;
width:100%
}
header a {
border: 1px solid #ddd;
padding: 1%;
text-decoration: none;
color: #ccc;
display:inline-block
}
footer {
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 10%;
background: #ccc;
}
aside {
position: fixed;
top: 12%;
left: 0%;
width: 20%;
height: 78%;
background: #f2f1f1;
overflow-y: auto;
}
section {
position: fixed;
top: 12%;
left: 20%;
width: 82%;
height: 78%;
background: #fff;
overflow-y: scroll;
}
<header>
<img src="Logo.png" alt="logo" />
<span class="links">
Home
About
Gallery
Work
Contact
</span>
</header>
<footer></footer>
<aside></aside>
<section></section>
Just replace your header .links class
header .links
{
display:inline-block;
position:absolute;
bottom:10%;
width:100%
}
It will work for you.
this is my code and when the page has more content when we scroll the header moves too then i tried making the position of the header fixed but then the footer doesn't stick to bottom :/
html,body
{
margin: 0px;
height:100%;
min-height: 100%;
top: 0;
width: 100%;
position: absolute;
}
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
}
#container
{
min-height: 85%;
margin-top: 0.5%;
}
footer
{
bottom: 0;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
position: relative;
}
Set position:fixed to the footter
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
z-index:1000;
position:fixed;
/*.........^........*/
top:0;
}
footer{
bottom: 0;
background-color: #000000;
z-index:1000;
width: 100%;
height: 6%;
min-height: 6%;
position:fixed;
/*.........^........*/
}
Fiddle Demo
JsFiddle
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
position: fixed;
top: 0;
}
footer
{
bottom: 0;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
position: absolute;
color: #FFFFFF;
}
Here i've mentioned height: 1000px; for your understanding... you can change it...
footer
{
position: fixed;
z-index: 300;
bottom: 0px;
left: 0px;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
}
Try this code:
DEMO
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
top: 0;
position: fixed;
}
footer
{
bottom: 0;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
position: absolute;
}