I am trying to position some elements properly but they seem to clip/interfere with each other and I am not sure how to solve the issue.
I would like a fixed positioned header at the top & bottom with a center element that does not clip with them. Inside of the center I would like a left and right sidebar which also doesnt clip with the center.
Positioning & Size should not be absolute.
Top / Bottom act as Header/Footer only these are supposed to be fixed.
With this I mean that if I change my browsers width for example the content should 'resize'
Any idea or hint on how to achieve this?
|--------------------------------|
| Top (fixed header) |
|--------------------------------|
|------| Center/content |------|
|------| |------|
|------| ^ |------|
|------| | |------|
| Left | <--stretch--> | Right|
|------| | |------|
|------| v |------|
|------| |------|
|--------------------------------|
| Bottom(fixed footer) |
|--------------------------------|
This is what I currently have, header & footer are positioned corretly but they clash with my other elements...
html,
body {
height: 100%;
margin: 0 auto;
}
body {
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-shadow: 1px 1px black;
}
.page {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.header {
position: fixed;
width: 100%;
top: 0;
background: #ddd;
}
.footer {
position: fixed;
float: bottom;
bottom: 0;
background: #aaa;
}
.left {
width: 20%;
height: 100;
float: left;
background: #ccc;
}
.middle {
width: 60%;
float: left;
display: block;
background: #ddd;
}
.right {
width: 20%;
float: right;
background: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Titel</title>
</head>
<body>
<div class="page">
<div class="header">
<p>test2</p>
</div>
<div class="center">
<div class="left">
<p>test2</p>
</div>
<p>test2</p>
<div class="right">
<p>test2</p>
</div>
</div>
<div class="footer">
<p>test</p>
</div>
</page>
</body>
</html>
You need to set the height of your left and right bar to 100% of screen and I haven't seen this in your code.
Second because you are using fixed position for headers and footers but not for your left and right bar so the problem of interference of div is common.
html,
body {
height: 100%;
margin: 0 auto;
}
body {
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-shadow: 1px 1px black;
}
.page {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.header {
position: fixed;
width: 100%;
top: 0;
background: Red;
float: left;
}
.footer {
position: fixed;
float: bottom;
bottom: 0;
background: Red;
width: 100%;
}
.left {
position: fixed;
width: 10%;
height: 100vh;
float: left;
background: #ccc;
margin-top: 35px;
}
.middle {
width: 60%;
float: left;
display: block;
background: Blue;
}
.right {
position: fixed;
width: 10%;
height: 100vh;
background: #bbb;
right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Titel</title>
<style type="text/css">
</style>
</head>
<body>
<div class="page">
<div class="header">
<p>test2</p>
</div>
<div class="center">
<div class="left">
<p>Left</p>
</div>
<p>test2</p>
<div class="right">
<p>test2</p>
</div>
</div>
<div class="footer">
<p>test</p>
</div>
</div>
</body></html>
I think you skiped something in your html file. You probably should place your middle div there.
If you want the top and the bottom bars to be fixed and the rest to be moving with the scrollbar, you should do the following:
<div class="page">
<div class="header">
<p>header</p>
</div>
<div class="center">
<div class="left">
<p>left</p>
</div>
<div class="middle">
<p>middle</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
</div>
I added a border for the top and the bottom panels so you can see what area they cover and what behind them is.
.header {
position: fixed;
width: 100%;
top: 0;
/*background: #ddd;*/
border: 1px dashed #000;
}
.footer {
position: fixed;
width: 100%;
/*float: bottom;*/
bottom: 0;
/*background: #aaa;*/
border: 1px dashed #000;
}
And your left, right and middle sections should be inline-blocks, I believe:
.left {
width: 20%;
/*height: 100;*/
display: inline-block;
float: left;
background: #ccc;
}
.middle {
width: 60%;
float: left;
display: inline-block;
background: #ddd;
}
.right {
width: 20%;
display: inline-block;
float: right;
background: #bbb;
}
You may want to add some padding at the top of your center area, so that the top bar does not cover the center panel:
.center
{
padding-top: 60px;
}
Try this,
[Demo] https://jsfiddle.net/RRakeshraj/dk4mezgb/1/
CODE
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
.header-wrap{
height:55px;
background:gray;
width:100%;
position:fixed;
top:0;
}
.body-wrapper{
width: 70%;
margin: 55px auto;
min-height: 800px;
background:#eee;
}
.left-panel,.right-panel{
min-height:557px;
background: rgba(104, 241, 104, 0.68);
width:15%;
position:fixed;
}
.left-panel{
top:55px;
left:0;
}
.right-panel{
top:55px;
right:0;
}
.footer-wrap{
height:50px;
background:gray;
width:100%;
position:fixed;
bottom:0;
}
</style>
HTML
<div class="page-wrapper">
<div class="header-wrap">
<h3><!--Header--></h3>
</div>
<div class="left-panel"><h4><!--Left Panel--></h4></div>
<div class="body-wrapper">
<div class="content-panel"><h1><!--Content--></h1></div>
</div>
<div class="right-panel"><h4><!--Right panel--></h4></div>
<div class="footer-wrap">
<h3><!--Footer--></h3>
</div>
</div>
Related
I have a webpage with following structure:
div: (app)
div: (navbar)
div: (wrapper) {position: relative}
div: (intro)
div: (content) {position: absolute}
div: (footer)
where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.
I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.
I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
position: relative;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
/* align-items: center;
justify-content: center;
display: flex;*/
}
.content {
position: absolute;
top: 250px;
width: 94%;
right: 3%;
left: 3%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 960px;
margin: auto;
min-height: 800px;
background-color: gray;
}
.footer {
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content
Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).
Updated: .contentto span width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
}
.content {
margin: -250px auto auto;
width: 94%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 906px;
min-height: 800px;
background-color: gray;
}
.footer {
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
delete your content min-height. is that what you need?
I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.
Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.
I'd like for the left div to always remain and only the right divs to scroll.
HTML:
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
CSS:
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: static;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
You just have to set position: fixed for left div. Check code below.
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: fixed;
}
#clear {
clear: both;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
you need the first in fixed position and the rest be margin-left at 50% ... if i understood:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.div-left {
background-color: darkblue;
height: 100%;
width: 50%;
margin: 0px;
position: fixed;
}
[class^="div-right"] {
background-color: yellow;
height: 100%;
margin-left: 50%;
}
.div-right-2 {
background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
I have a wrapper, which needs to be horizontally centered. I know of no other way to do it, except using position absolute.
#wrapper {
width: 721px;
height: 720px;
position: absolute;
margin: auto;
top: 136px;
left: 0;
right: 0;
background: white;
clear: both;
}
It contains three other divs, which are floated. If I change position of the wrapper to relative, those divs mess up.
____________________________________________
header
____________________________________________
__wrapper____________
| | |
| | |
| div1 | div2 |
| | |
| | |
| | |
|_________|__________|
| div3 |
|____________________|
__________________________________________
footer
__________________________________________
But I want to have a sticky footer, which will be always at the bottom of the site. No matter how much content I have, it will stay at the bottom of it. I could achieve it if my wrapper wasn't position:absolute, but since it can't push the footer bottom, I want to know is there any other way to do it?
.footer {
border-top: 1px solid #dcdcdc;
max-width: 100vw;
font-weight: bold;
text-align: center;
background: #f0f0f0;
width: 100%;
height: 80px;
}
As you can see in JS-FIDDLE the footer is hiding behind header.
Are you using bootstrap?
With bootstrap, your layout would be as simple as this code:
<div class="navbar navbar-fixed-top">
you header
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">
your div1
</div>
<div class="col-md-3 col-md-offset-6">
your div2
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
your div3
</div>
</div>
<div class="navbar navbar-fixed-bottom">
your footer
</div>
And give to the CSS:
html, body {
padding-bottom: 55px;
padding-top: 55px;
}
As this should fit the navbar well in both top and bottom sides.
EDIT: Because you do not use frameworks, then:
Add this the css footer.
position: fixed;
bottom: 0;
This will show you the footer, because it is hidden behind the header.
This is a rough throw together, but in modern web development we get the joys of the wonderful flexbox. Here is a quick example
<div class="wrapper">
<div class="flex-wrapper">
<div class="flex-container">
<div class="div1">Box1</div>
<div class="div2">Box2</div>
</div>
<div class="div3">Box3</div>
</div>
</div>
.wrapper {
display:flex;
justify-content: center;
align-content: center;
height: 500px;
}
.flex-wrapper {
display:flex;
flex-direction: column;
align-self: center
}
.flex-container{
display: flex;
position: relative;
}
.div1,.div2 {
height:100px;
width:100px;
}
.div1 {
background-color:blue;
}
.div2 {
background-color:red;
}
.div3 {
background-color:green;
width:200px;
height:100px;
}
Just use that type of layout, but make another container around the 'wrapper' so that the footer isnt affected.
https://jsfiddle.net/wxokadrx/
Also, in case you are unfamiliar with flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
If u don't want to use flex, this may help
First, it is not necessary to use position absolute to horizontally align a div.
<div id="outer">
<div id="inner">
</div>
</div>
<style>
#outer {
background-color: green;
}
#inner {
left: 0;
right: 0;
margin: auto;
height: 300px;
width: 400px;
background-color: red;
}
</style>
Here is the fiddle https://jsfiddle.net/x2j325n4/
Floating inner div's drops the height of wrapper to 0px. So replacing floats with display:inline-blocks may help.
<style>
#header {
width: 100%;
height: 50px;
background-color: pink;
}
#wrapper {
left: 0;
right: 0;
margin: auto;
width: 60%;
}
#div1 {
width: 30%;
height: 400px;
display: inline-block;
background-color: grey;
}
#div2 {
display: inline-block;
width: 60%;
height: 400px;
background-color: red;
}
#div3 {
width: 100%;
height: 400px;
display: inline-block;
background-color: blue;
}
#footer {
width: 100%;
height: 50px;
background-color: green;
}
</style>
<div id="header">
Hey i'm header
</div>
<div id="wrapper">
<div id="div1">
first div
</div>
<div id="div2">
second div
</div>
<div id="div3">
third div
</div>
</div>
<div id="footer">
Hey i'm footer
</div>
Fiddle : https://jsfiddle.net/rjhwxdL5/
or if u want the footer to stay at the bottom of your viewport, just use position: fixed; bottom: 0; in your footer
You should try clear property of CSS (in my case I've used a div class called clearfix), put this after .box2 like:
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix:before {
content: '';
display: table;
}
Have a look at the snippet below (use fullscreen mode):
.header {
min-width: 720px;
top: 0;
left: 0;
right: 0;
max-width: 100vw;
line-height: 80px;
font-weight: bold;
text-align: center;
margin: 0 auto;
border-bottom: 1px solid #dcdcdc;
background: #f0f0f0;
position: fixed;
width: 100%;
height: 80px;
z-index: 1;
}
#wrapper {
border: 1px solid blue;
width: 721px;
background: white;
margin: 120px auto 40px;
}
.box1 {
clear:both;
display: inline-block;
float:left;
height:300px;
width:360px;
border: 1px solid black;
}
.box2 {
clear:both;
display: inline-block;
float:right;
height:300px;
width:350px;
border: 1px solid black;
}
.footer {
border-top: 1px solid #dcdcdc;
max-width: 100vw;
font-weight: bold;
text-align: center;
background: #f0f0f0;
width: 100%;
height: 80px;
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix:before {
content: '';
display: table;
}
<div class=header>
Asdf
</div>
<div id="wrapper">
<div class="box1"> asdf</div>
<div class="box2"> asdf</div>
<div class="clearfix"></div>
</div>
<footer class="footer">
ASDAFASFAFASFSAF
</footer>
Hope this helps!
I have a problem with my CSS.
I am working on a website which I want to make my own CSS for, I tried to make it myself but I can not figure it out.
I am aiming for a website that looks like this
But currently looks like this:
I tried everything I could. I am using some CSS right now but it isn't working how I want it too.
html {
background: #ECF0F1;
}
.sidebar {
width: 20%;
height: 100%;
float: left;
background: #043D5D;
position: fixed;
top: 50px;
left: 0;
}
.sidebar p{
margin-left: 10px;
color: #FFF;
}
.nav{
float: left;
position: fixed;
width: 100%;
height: 50px;
background: #043D5D;
top:0;
left:0;
}
.nav .logo img{
height: 40px;
}
.content{
width: 80%;
height: 100%;
float: left;
top: 55px;
position: fixed;
margin-left: 21%;
}
Fiddle: https://jsfiddle.net/bqgpn6hj/
Is there a better way to do this? Thanks in advance!
Check out my jsfiddle here: https://jsfiddle.net/bqgpn6hj/1/
I hope it can be usefull for you.
Code below:
body {
background: #ECF0F1;
}
.clear {
clear:both;
}
.nav {
width:100%;
float: left;
background:red;
}
.logo{
width: 20%;
float:left;
}
.search {
width:78%;
float:left;
padding: 10px 1%;
text-align:right;
}
.sidebar {
width: 16%;
background: green;
float:left;
padding: 2% 2%;
}
.content {
width: 80%;
float:left;
position:relative;
background: yellow;
height: 466px;
}
.subbar {
background: gray;
height: 200px;
}
.content .bottom {
position:absolute;
bottom:0px;
background: blue;
width:90%;
padding: 5%;
}
And HTML
<body>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/40x40">EasyMusic
</div>
<div class="search">
<input type="text">
</div>
</div>
<div class="clear"></div>
<div class="sidebar">
<div class="subbar" id="1">
<p>Sidebar, links here</p>
</div>
<div class="subbar" id="2">
<p>Bottom</p>
</div>
</div>
<div class="content">
<p>Content, everything here</p>
<div class="bottom">
bottom
</div>
</div>
<div class="clear"></div>
</body>
I want to get structure like this:
---------------------------------------------
| head |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed || | |
| || content-left | con-right|
| ||--------------------------------|
css file:
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
}
.content-div {
position:absolute;
float:right;
left:150px;
}
.content-right {
width: 310px;
float: right;
}
.content-left {
float: left;
}
divs:
<div>
<div class="left-menu" > </div>
<div class="content-div">
<div class="content-left"> </div>
<div class="content-right"> </div>
</div>
</div>
I get content-right in the next line, not in the same line with content-left, like i have content-left width=105%, but i don't. I tried this and some other suggestion, but no luck. How can i fix this problem?
Flexbox can do that.
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100vh;
}
.left-menu {
position: fixed;
/* fix menu, no scroll */
left: 0;
width: 150px;
background: red;
height: 100%;
}
.content-div {
margin-left: 150px;
background: blue;
flex: 1;
display: flex;
}
.content-right {
flex: 0 0 310px;
}
.content-left {
flex: 1;
background: orange;
}
<div class="parent">
<div class="left-menu"></div>
<div class="content-div">
<div class="content-left"></div>
<div class="content-right"></div>
</div>
</div>
Check out the JsFiddle for the demo
HTML
<div>
<div class="header">HEADER</div>
<div class="left-menu" >LEFT MENU</div>
<div class="content-div">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
</div>
CSS
.header {
height: 70px;
background: blue;
}
.left-menu {
width: 120px;
background: red;
position: fixed;
left: 0px;
top: 70px;
bottom: 0px;
}
.content-div {background: yellow;margin-left: 120px}
.content-div div {
display: inline-block;
width: 49%;
}
.content-left {background: aqua;}
.content-right {background: green;}
Position anything is a pain, I suggest using bootstrap for something like this.
(I just saw the comment above me about suggesting the same thing but I'll give you the code so you can implement it just incase)
Bootstrap supplies a nice CDN that you can throw in your html and have bootstrap wherever you go!
So put all of this in your html...
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Header</h1>
</div> <!-- col-lg-12" -->
</div> <!-- row -->
<div class="row">
<div class="col-lg-3" style="position: fixed;">
<p>Left Menu Fixed</p>
</div> <!-- col-lg-3 -->
<div class="col-lg-6">
<p>Content Left</p>
</div> <!-- col-lg-6 -->
<div class="col-lg-3">
<p>Content Right</p>
</div> <!-- col-lg-3 -->
</div> <!-- row -->
</div> <!-- container -->
</body>
</html>
This will provide the layout you're suggesting.
Hope this helps!
This should work for what you want
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
width: 150px;
height: 100%;
}
.content-div {
position:fixed;
left:150px;
right: 0px;
height: 100%;
}
.content-right {
float: right;
}
.content-left {
float: left;
}
Set a height and background-color on .content-left and .content-right if you want to see how they position themselves.
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
background: black;
width:15%;
height: 100%;
}
.content-div {
position:absolute;
float:right;
left:16%;
background: red;
width:84%;
height: 100%;
}
.content-right {
width: 310px;
height: 100%;
float: right;
background: yellow;
}
.content-left {
float: left;
background: green;
height: 100%;
width: calc(100% - 310px);
}