Not sure how to title the question. I have an html structure like this:
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
With some css like this:
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.
Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.
http://jsfiddle.net/p2Mzx/1/
Thanks in advance!
The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 25px:
html:
<div id="wrapper">
<div id="nav"></div>
<div id="content">
</div>
</div>
css:
#nav {
width: 200px;
height: 50px;
margin: 0 25px;
position: fixed;
top: 0;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Also see the fiddle.
It would be more appropriate to put the nav inside the wrapper, just above the content.
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.
#nav {
height: 50px;
margin: 0px 25px 0px 25px;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Please see this fiddle: http://jsfiddle.net/p2Mzx/20/
You can fixed the nav and content to give padding-top.
Consider this link jsfiddle
I think you can add margin: 0 auto for nav too.
Then nav will be positoned to parent element just like wrapper,centered.
but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?
Related
I've a problem with my Menu, I don't know how to fix this. It needs to get the full height of your screen but I can't fix it.
Here is my CSS code.
nav{
background-color: #F9F9F9;
width: 300px;
padding: 10px;
position: absolute;
height: auto;
float: left;
box-shadow: -25px 0px 60px #00000033;
}
html body nav div#nav-inner{
padding-top: 70px;
margin: -10px;
}
Here is a JSFiddle with my problem:
JSFiddle
First you need wrapper div inside body:
<body>
<div class="wrapper"><!--added-->
<nav>...</nav>
<div id="container">...</div>
</div>
</body>
With CSS:
.wrapper{
position: relative;
overflow: hidden;
}
Next you need to change #container div "position:absolute" to "position:relative"
and finally:
nav{
height: 100%
}
On this way. You will have relative .wrapper with height of your page content and with full height of this content :)
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I've looked at some questions posted here but everything seems overly complicated for what should be such a simple task? I just want a footer that stays fixed at the bottom of the screen no matter how long the page is vertically. Everything works, except I can't get the footer centered, it always aligns left..? Thanks! http://jsfiddle.net/n4xxj/
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
div {
width: 960px;
margin: auto;
}
#content {
background-color: beige;
border: 1px solid;
height: 1200px;
margin-top: 100px;
margin-bottom: 150px;
}
#footer {
background-color: lightgray;
border: solid 1px;
height: 100px;
position: fixed;
bottom: 0px;
}
Update your HTML to wrap in a wrapper div
<div>
<div id="content"></div>
<div id="footer"></div>
</div>
DEMO
Here you go, you will need to encapsulate the interior div's into a big #container div and add to it margin: 0 auto; to align it.
Please note for a complete fix you should also add this (it's a simple IE fix):
body { text-align: center; }
#container { text-align: left; margin: 0 auto; }
And of course the #footer will need to have width: 100%;
Also the fiddle:
http://jsfiddle.net/n4xxj/3/