I've started work on a brand new site and i've been playing around with designs for a while, however one problem I seem to be having is regarding positioning a navigation bar with a full screen width that is fixed to scroll. Underneath i have created a div called "wrapper" which is set to centre at a width of 980px. Below is code example;
<style>
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
}
#wrapper {
margin: 0 auto;
width: 980px;
}
</style>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>
The box i created within "wrapper" SHOULD (obviously isn't because i'm doing something wrong - somewhere) sit 5px below the navBar, however because I have used position: fixed it sits underneath it instead. Could anybody lead me to how I solve this issue and have it so that the wrapper sits directly below rather than underneath the navbar whilst maintaining it's centering?
set top:0 on your navbar and add 30px margin-top on your wrapper div
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top:0
}
#wrapper {
margin: 30px auto 0;
width: 980px;
}
http://jsfiddle.net/duncan/NkRxQ/
Complete solution to solve your problem.
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top: 0;
}
#wrapper {
margin: 30px auto;
width: 980px;
background: #ccc;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;">
<!-- You can create left side elements here (without any float specification in CSS) -->
</div>
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;">
<!-- You can create right side elements here (without any float specification in CSS) -->
</div>
<div class="clear"></div>
</div>
</body>
</html>
Starting brand new site should contain DOCTYPE and 0 margin for all tags. (Very helpful thing).
Related
I'm trying to get box-shadows playing nicely with different backgrounds. The standard way seems to be using mix-blend-mode, and applying a fake div behind the real one with the effect.
An example of this technique here (click the + icon in the top right).
If I alter this code slightly to wrap the non-background elements into a container with position: fixed it breaks, example here. Note, position: absolute works fine.
I do need a structure like the example, a parent that's position-fixed and blend that can accommodate variable heights or widths and multiple instances of the .box element. I can hazard a rough guess why it doesn't work (fixed breaks it out of the doc flow and therefore there's nothing to blend), I can't see a way round it though.
Another example I made that reduces things a bit more, note how if you comment out position-fixed it works fine:
.blend {
height: 100%;
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.box {
background: grey;
min-height: 10px;
width: 100%;
position: relative;
margin: 0 0 15px;
}
.container {
/* using absolute works */
position: absolute;
/* using fixed does not work */
position: fixed;
height: 50%;
width: 50%;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
<div class="column left"></div>
<div class="column right"></div>
<div class="container">
<div class="box">
text
<div class="blend"></div>
</div>
<div class="box">
text<br /><br />more text
<div class="blend"></div>
</div>
</div>
(I saw a previous question, which looks along similar lines but I couldn't get their example to work to check)
You can move the blend element out of the container and make it fixed with the same dimensions as container.
Checkout the snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{
height:100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
.blend {
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: fixed;
height: 50%;
width: 50%;
}
.box {
background: grey;
height: 100%;
width: 100%;
position: absolute;
}
.container {
position: fixed;
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="column left"></div>
<div class="column right"></div>
<div class="blend"></div>
<div class="container">
<div class="box">
text
</div>
</div>
</body>
</html>
3.2. Behavior specific to HTML
Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups. An element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to.
Eg. position: fixed will create a stacking context (isolated group).
https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
Related answer more specific on stacking context: https://stackoverflow.com/a/56545440/7947839
I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model
I am trying to implement a sticky footer for a site i'm working on (see here). I attempted to follow the guide on CSS Sticky Footer - specifically, this implementation.
This is working perfectly in Firefox (13) but in Chrome (21) and IE (9) the #footer is pushed further down the page adding a vertical scroll bar. I assume this is something to do with the use of padding and margins inside my #wrapper - however I am unable to put my finger specifically on the issue. I would really appreciate some help.
The site structure:
<html>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="page"></div>
</div>
<div id="footer"></div>
</html>
and the relevant CSS:
#wrapper {
min-height: 100%;
width: 100%;
}
#header {
background: url("/images/backgrounds/transparent.png") transparent;
border-bottom: 2px solid #EF7C31;
height: 44px;
margin: 0 auto 20px;
width: 960px;
}
#menu {
background:#FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
height: 60px;
margin: 0 auto 20px;
padding: 10px 20px;
width: 920px;
}
#page {
background: #FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin: 0 auto 30px;
overflow-x: hidden;
overflow-y: auto;
padding: 20px 20px 30px;
width: 920px
}
#footer {
background: url("/images/backgrounds/transparent.png") transparent;
border-top: 2px solid #EF7C31;
clear: both;
height: 116px;
margin-top: -158px;
overflow: auto;
padding: 20px;
position: relative;
}
Thank you
Add this line to the wrapper:
overflow: hidden;
So you would have:
#wrapper {
min-height: 100%;
width: 100%;
overflow: hidden;
}
Alternatively add a push div just before the footer. This will push the footer down.
I noticed a few things that were causing some issues. The tutorial you linked to is marked as malicious here at work so I have always used Ryan Fait's CSS Sticky Footer Tutorial.
Checking what you have off of that I noticed a few differences. First of all, you need to set the html body and height as 100% for this to work in all browsers. Secondly, your padding and your border were causing issues, so I created another div that would contain the specific content within your footer and would have the padding and the border css included on it.
HTML:
<html>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="page"></div>
<div class="push"></div>
</div>
<div id="footer">
<div class="footerContent"></div>
</div>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width:100%;
margin: 0 auto -158px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 158px; /* .push must be the same height as .footer */
}
.footerContent {
border-top: 2px solid #EF7C31;
padding:20px;
}
Live DEMO
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/