I want to design a web page using a fixed header in the top of the page and a fixed menu in the left side of the page. I want that the other parts are floater divs. How can I do this?
Thanks.
I think what you want is to create a header fixed position and put the menu inside the header and make the menus float left, like this example
Html:
<header>
<nav>
<ul class="menu">
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
</nav>
</header>
css:
header {
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
background:#000;
}
header .menu {
float:left;
text-align:left;
}
header .menu li {
display:inline-block;
margin:0 10px;
}
header .menu a {
color:#fff;
text-decoration:none;
}
http://jsfiddle.net/8TB6e/
Try this,
<div class='header'>
<!--Whatever you want to include in the header section-->
</div>
<div class='leftsidebar'>
<!--Whatever you want to include in the left section-->
</div>
<div class='main-content'>
<!--This is your general section-->
</div>
Now the CSS will be as,
.header{
position: fixed;
top:0px;
height:70px;
background-color: red;
width:100%;
}
.leftsidebar{
position: fixed;/*write relative if you don't want this to be fixed*/
left:0px;
background-color: aqua;
top:70px;
width:100px;
height: auto;
}
.main-content{
position:relative;
left:100px;
top:70px;
}
Tell me if this helps :)
You cant float a fixed element as far as I know.
Think of it this way: All of the three divs will be fixed but looking like they're floating!
Try this CSS:
#header{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100px;
background: black;
}
#left_nav{
position: fixed;
top: 100px;
left: 0px;
width: 10%;
height: 600px;
background: red;
}
#content{
width: 90%;
height: 600px;
background: blue;
position: fixed;
top: 100px;
left: 100px;
overflow: scroll;
}
#just_to_activate_the_scroller{
width: 150px;
height: 1000px;
}
HTML:
<body>
<div id="header"></div>
<div id="left_nav"></div>
<div id="content">
<div id="just_to_activate_the_scroller"></div>
</div>
</body>
Related
Can a centered div contain a fixed div?
I would like to center a fixed nav box and a scrolling main box side-by-side together in any big window. I can fix the nav box in a non-centered view (first code below), or center the view with a scrolling nav box (second code), but have been unable to combine these two traits, after many tries including multiple nested wrappers. Maybe fixed and centering are incompatible? If this is possible I will appreciate seeing how it is done. Thank you.
(1) Fixed nav box, scrolling main box, not centered:
<style>
#nav {position:fixed; top:50px; left:80px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:50px; left:380px; width:800px; height:1200px; background:#eee}
</style>
<div id="nav">
</div>
<div id="main">
</div>
</div>
(2) Centered, nav box scrolls (#bigscreen here is just a temp to show the centering):
<style>
#bigscreen {width:2000px; height:1200px;}
#window {width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
#wrap {position:relative; width:1125px;height:800px; background:bisque}
#nav {position:absolute; top:54px; left:20px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:54px; left:300px; width:800px; height:640px; background:#eee}
</style>
<div id="bigscreen">
<div id="window">
<div id="wrap">
<div id="nav">
</div>
<div id="main">
</div>
</div>
</div>
</div>
First, you need to create a wrapper(#content-wrapper in my answer) that includes #nav and #main divs. Then add display: flex for that wrapper to set child divs horizontally. To align the wrapper into the center, define a fixed width(1100px in my answer) and set left, right margin to auto.
Then add position: relative to the wrapper. That allows you to play with css position property in child divs within the wrapper.
Finally, add position: fixed for #nav div to set fixed position and add position: absolute & left: 300px(in my answer) for #main div to scroll in the wrapper.
See below.
<style>
#content-wrapper {
position: relative;
width: 1100px;
margin: 50px auto;
display: flex;
}
#nav {
position: fixed;
width: 270px;
height: 400px;
background: #ddd
}
#main {
position: absolute;
left: 300px;
width: 800px;
height: 1200px;
background: #eee
}
</style>
<div id="content-wrapper">
<div id="nav"></div>
<div id="main"></div>
</div>
You mean like this?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.8);
padding: 10px;
display: flex;
}
#nav {
margin-right: 10px;
width:20%;
background: rgb(240,240,240);
}
#main {
width: 80%;
background: rgb(240,240,240);
padding: 10px;
overflow: auto;
}
#content {
height: 2000px;
background-color: rgb(220, 220, 220);
font-family: arial;
text-align: center;
line-height: 2000px;
margin-bottom: 10px;
}
<div id="overlay">
<div id="nav">
</div>
<div id="main">
<div id="content">Overflow content</div>
</div>
</div>
If this is the result you're looking for you should focus only on the following lines, they are the most important ones to achieve this.
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
}
#nav {
width:20%;
}
#main {
width: 80%;
overflow: auto;
}
Edit: You can click on full page to see the result in expanded height.
this is my html code
<html>
<head>
<link rel="stylesheet" href="main-pd.css"/>
</head>
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
</html>
and this is my css code
.menu-wrap{
background-color:pink;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350;
float:right;
}
without float:right property it is showing the background:pink color of the parent div and in the above case no pink background. Why is it happening?
Because you did not mention the width and height of parent div, So after putting float:right in child element, parent also float on right. Check below code:
.menu-wrap{
background-color:pink;
display:inline-block;
width: 100%;
height: 105px;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350px;
float: right;
position: relative;
top: -17px;
}
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
If i understood your question correctly then this is what i suggest:
HTML:
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
CSS:
.menu-wrap{
width: 100%;
height: 500px;
float: left;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
float: right;
background-color:blue;
border:solid;
}
OR:
CSS:
.menu-wrap{
height: 500px;
position: relative;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
background-color:blue;
border:solid;
}
Hope this helps you out.. definitely take a look at float and position:relative/position:absolute css properties in detail.
Finally i have understood the reason :) it is simply because
the parent element contained nothing but floated element, the height of it collapses to nothing.
for more details refer:- https://css-tricks.com/all-about-floats/
You must have something else your css file that is doing that. I have tested your code in jsfiddle and is working fine. Have a look https://jsfiddle.net/max234435/boL8zs4a/
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I'm new with DIV's and I would like to build a simple template for my website.
I need the header to be fixed and 100%, left panel for menu 200px, right panel for main 100% div and bottom panel.
I need that if the left panel doesn't show that the main will be 100%. now if it show's the "main" div in under the left panel. 10X
<div id="top_menu"></div>
<div id="left_menu"></div>
<div id="main"></div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
#left_menu{
margin-top:40px;
float: left;
width: 200px;
background: #F4F4F4;
position: fixed;
z-index: 10;
}
#main{
margin-top:40px;
float: right;
background:red;
padding:30px;
width: 90%;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
Update your HTML and CSS like below.
HTML
<div id="top_menu"></div>
<div class="distab">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
CSS
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
.distab{display:table; table-layout:fixed;}
#left_menu{
margin-top:40px;
width: 200px;
background: #F4F4F4;
z-index: 10;
display:table-cell;
}
#main{
margin-top:40px;
background:red;
padding:30px;
width: 100%;
display:table-cell;
box-sizing:border-box;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
DEMO
<div id="top_menu"></div>
<div id="content">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
}
#lineContainer{
overflow: hidden; /* clear the float */
}
#left_menu{
margin-top:40px;
float: left;
max-width: 200px;
background: #F4F4F4;
}
#main{
margin-top:40px;
background:red;
padding:30px;
overflow: hidden;
}
#bottom{
height:30px;
width:100%;
}
Demo here:
http://jsfiddle.net/msankhala/Ck7pe/3
http://jsfiddle.net/msankhala/Ck7pe/3/embedded/result/
for this you have to put your left menu and main under one div & put leftMenu to the height of 20% and then you will see that main had automatically taken remaining area of its parent div and when leftMenu get disappeared main will automatically take the full 100% area.
You can use Javascript for disappearing purpose but jquery is best to do this all task.
I'm trying to do a dynamic layout to my website, but I'm having problems with the menu and the general content. When I'm at 1920x1080, margin and position still fine, but when I decrease this size, the general content come over the fixed menu.
How can I apply this margin between lateral sidebar(where the menu and the logo will be) and the general content?
<div id="header">
<div id="logo">
aaaaaaaaa
</div><!--logo-->
<div id="center">
<div id="wrap">
<ul id="">
<li>Início</li>
<li>Potifólio</li>
<li>Clientes</li>
<li>Sobre</li>
<li>Contato</li>
</ul>
</div>
</div><!--menu-->
</div><!--header-->
<div id="content">
<div id="inicio">
inicio
</div>
<div id="contato" style="background-color:blue">
contato
</div>
</div>
</div><!--box-->
css:
*{margin:0;padding: 0;}
body{
background-color:#fffbe7;
overflow:hidden;
}
html, body, #center {
height: 100%;
position:relative;
margin:0px;
padding:0px;
}
#header{
position: fixed;
}
#center #wrap {
height: 50%;
left: 1%;
margin: 0;
padding: 0;
position: fixed;
top: 50%;
}
#center ul{
list-style: none;
padding:0;
margin:0;
border-right:1px solid #000;
padding-right: 20px;
}
#center ul li a{
color:#333;
text-decoration: none;
font-family: Georgia;
font-size: 30px;
}
#center ul li a:hover{
text-decoration: underline;
}
#header{
width:20%;
}
#content{
position: absolute;
top: 0%;
width:80%;
margin-left:10%;
}
#content div{
height: 400px;
background: red;
}
You can see the code and demo here:
http://jsfiddle.net/7eAJg/1/
Try removing the position:absolute on the content div, because absolute position is from the left side of the window, since your margins are % they are not the same. Let them stack as they should, without forcing the absolute.
Media queries will help you deliver and alter your styles for different sized browsers.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries