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
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.
Here's my code:
<div class="scroll">
<div class="category>
<h1>Title</h1>
<ul><li>...</li>
<li>...</li>
...</ul>
</div>
<div class="category>
<h1>Title</h1>
<ul><li>...</li>
<li>...</li>
...</ul>
</div>
<div class="category>
<h1>Title</h1>
<ul><li>...</li>
<li>...</li>
...</ul>
</div>
The div scroll has absolute position, the divs "category" have relative position and height: fit-content, the <ul> have absolute position and height: fit-content.
The content of the <ul> is dinamic (I get it from a database)
When I load the page the <ul> has height=0 and so all the div "category" are overlapping.
Here's the css:
.scroll {
bottom:0px;
left:100%;
width: 100%;
position:absolute;
opacity:0;
overflow-x:hidden;
top: -20px;
}
.scroll ul {
height: fit-content;
position: absolute;
top:30px;
width:85%;
left:15%;
opacity:1;
bottom:30px;
right:5%;
font-family:'Amatic SC', 'Open Sans', Helvetica, sans-serif;
text-align:center;
font-size: 20px;
line-height: 30px;
}
.scroll li {
display:inline-block;
float:left;
margin-bottom: 65px;
width:40%;
margin-right: 10%;
}
.category {
position: relative;
height: fit-content;
}
Any suggestion? Thanks
I hope I was clear enough
I solved it! I removed "position:absolute" from .scroll ul and "float:left" from .scroll li
I am using this code which works fine in Firefox, but not in Chrome, Edge, IE11. The problem seems to be related to display:table-row.
The yellow sidebar with the red buttons should stay at the same height of the green area. This is true in FireFox but not eslewhere.
Is there anyway I can change it to make it more supported?
html,body{
height:100%;
width:100%;
overflow:hidden;
padding:0;
margin:0;
display:table;
}
#titleContainer{
display:table-row;
background-color: blue;
}
#contentContainer{
display:table-row;
background-color: red;
height: 100%;
position:relative;
}
#sidebar{
position: absolute;
left: 6px;
overflow: hidden;
width: 40px;
margin: 0;
padding: 0;
top: 6px;
bottom: 6px;
background-color: yellow;
z-index:1000;
}
#sidebar > ul {
list-style-type:none;
width:40px;
margin:0;
padding:0;
position:absolute;
}
#sidebar > ul + ul {
bottom:0;
}
#sidebar > ul > li {
width:100%;
overflow:hidden;
height:40px;
background-color: red;
}
#page{
background-color: green;
height:100%;
width:100%;
position:absolute;
}
<div id="titleContainer">
<center>
<h2>
TITLE
</h2>
</center>
</div>
<div id="contentContainer">
<div id="sidebar">
<ul>
<li>TOP</li>
</ul>
<ul>
<li>BOTTOM</li>
</ul>
</div>
<div id="page"></div>
</div>
Ok so I achieved the same functionality as in my example, but with support for the other browsers as well by removing the display:table and using display:flex instead. My main problems were actually (I should have explained myself better I must admint):
I had to have two divs, one on another, which should take together whole the page height and whose height are dynamic
I cannot touch the .sidebar css, as it is an external project I'd better not change.
So my final code is this one, thanks both to #MrLister and #Pete for the precioud feedback (I removed the obsolete <center> tag as suggested by #Pete):
html,body{
height:100%;
width:100%;
overflow:hidden;
padding:0;
margin:0;
display: flex;
flex-flow: column;
}
#titleContainer{
background-color: blue;
text-align: center;
}
#contentContainer{
background-color: red;
height: 100%;
position:relative;
}
#sidebar{
position: absolute;
left: 6px;
overflow: hidden;
width: 40px;
margin: 0;
padding: 0;
top: 6px;
bottom: 6px;
background-color: yellow;
z-index:1000;
}
#sidebar > ul {
list-style-type:none;
width:40px;
margin:0;
padding:0;
position:absolute;
}
#sidebar > ul + ul {
bottom:0;
}
#sidebar > ul > li {
width:100%;
overflow:hidden;
height:40px;
background-color: red;
}
#page{
background-color: green;
height:100%;
width:100%;
position:absolute;
}
<div id="titleContainer">
<h2>
TITLE
</h2>
</div>
<div id="contentContainer">
<div id="sidebar">
<ul>
<li>TOP</li>
</ul>
<ul>
<li>BOTTOM</li>
</ul>
</div>
<div id="page"></div>
</div>
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 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>