I'm trying to have a fixed header on my webpage, i.e. it should always remain visible, even when scrolling. Note that my page is fixed width (800px) and horizontally centered on the screen.
What I've tried:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>
The separator is a horizontal line which should go all the width of the screen, see the footer.
Problems with this:
1. using the position:fixed also places it at left=0, instead of centered.
2. the separator doesn't show.
I can make the separator visible by placing it inside the header, but then the width is limited to 800px:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
<div class="separator clearfloat"></div>
</header>
The testpage is here.
How do I fix this?
I would position parent element as fixed and center header with margin: 0 auto;
jsFiddle Demo
Html:
<div id="top">
<header>Header</header>
</div>
<main>
<!-- Lots of content here. -->
</main>
Css:
#top {
position: fixed;
left: 0; top: 0px; right: 0;
z-index: 1;
/* The below styling is here for illustrative purpose only. */
border-bottom: 1px solid #c1c1c1;
background: #fff;
opacity: 0.9;
}
#top header,
main {
width: 500px;
margin: 0px auto;
}
#top header {
height: 100px;
/* Border styling is here for illustrative purpose only. */
border-left: 1px dashed #c1c1c1;
border-right: 1px dashed #c1c1c1;
}
main { margin-top: 100px; /* Should be the same as '#top header' height. */ }
Ok, a working solution.
In <header> wrap all the content (except separating line) with a <div>.
To that <div> you should add
overflow: hidden; //optional clearfix
width: 800px;
margin: 0 auto;
And also you should add width: 100%; to <header>
Just make your header the full width of the page and make that position: fixed;
Then wrap your header content in a div tag and set that to width: 800px; margin: auto;
This makes your header stay on a fixed position on top of your page.
And uses the div to set your menu/header data in the middle of the page.
Related
Fiddle: http://jsfiddle.net/rg3w8kxc/2/
I have a fixed bar on top and an element below it. Since the top bar is fixed, I need to add some padding to the top of the element below it so that the whole height of that element shows. However, when I add something like padding-top:40px for example, it doesn't move the element down; rather it creates space below the element. Same goes with margin.
I feel like I'm missing something obvious. What's the issue here?
Here's my HTML:
<div id="top-bar">
<div class="section-wrap">
Win a [name of phone]!
</div><!-- .section-wrap -->
</div>
<div id="top-section-page">
<div class="section-wrap">
<span>⇦</span> Back to the mix
</div>
</div>
<p>Some text here</p>
Here's my CSS:
#top-bar {
background: #FAFAFA;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: fixed;
width: 100%;
z-index: 999;
}
#top-section-page {
background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
border-bottom: 10px solid #FFF;
line-height: 185px;
margin-bottom: 100px;
}
You can add add the padding-top on the body and then you need a top 0px on the #top-bar
Add this to your css code:
body{
padding-top: 40px;
}
#top-bar {
top: 0px;
}
I'm sure this has been asked before but I'd really like to know why this is doing what's it's doing rather than just the answer (if there is one).
What I've got is a pretty simple layout at the moment, which consists of a main wrapper div, a header div, a content div and a footer div. The problem I'm having is when I come to place a number of squares within the content div and set their positioning to absolute - so as to lay them out in a grid so that they span the entire width of the content div. When I set these divs to absolute the footer div jumps up and does not appear below the grid of divs sitting in their parent content div. If I set the height of the content div to a value the footer div sits where it should, but if I don't or set it to auto (as I want to do) then the footer div sits effectively below the content div.
I have read that setting anything to absolute takes it out of the normal flow of the document, but is there anyway I can set the content div so that the height of the content div is set by the contents (ie the grid of divs) and also so that the footer div always sits below the content div?
Here is a mock up http://jsfiddle.net/M4jyH/3/
And here is my code
#wrapper {
width: 400px;
height: auto;
border: 1px solid #000;
margin: 10px auto;
padding: 10px;
}
#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}
#content {
position: relative;
width: 100%;
/*height:92px;*/
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
position: absolute;
width: 92px;
height: 92px;
background-color: #999;
}
#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
<div id="wrapper">
<div id="header">header</div>
<div id="content">
<div class="box" style="top:0px; left:0px;"></div>
<div class="box" style="top:0px; left:102px;"></div>
<div class="box" style="top:0px; left:205px;"></div>
<div class="box" style="top:0px; left:308px;"></div>
</div>
<div id="footer">footer</div>
</div>
You don't need to use position: absolute for the inner elements, to position them horizontally just use float: left with margin for spacing. You will still get a similar collapsing height going on with regard to the content region - because again floats are partially taken out of the content flow. However, this is easily fixed by applying overflow: hidden to the content area.
I've added first and last classes to your box elements, just to make handling margins easier:
<div id="content">
<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box last"></div>
</div>
I've also altered your css items as follows:
#content {
overflow: hidden; /* <-- added overflow hidden */
position: relative;
width: 100%;
outline: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
float: left; /* <-- replaced pos abs with float left */
margin-right: 10.5px; /* <-- added a specific margin */
width: 92px;
height: 92px;
background-color: #999;
}
.box.last {
margin-right: 0px;
}
With regards to using 10.5px for the margin, it is probably best if you re-evaluate the dimensions used so this is not necessary. However most modern browsers will handle this correctly.
http://jsfiddle.net/M4jyH/5/
position: absolute should really only be used for items that you specifically want taken out of the document flow and to not interfere with anything else.
Typically with my web-pages I'll have a #wrapper DIV that wraps the entire page and set to something like:
#wrap {position: relative; width: 1000px; display: block; margin: auto;}
My question is, if, inside that I have a banner like so:
#banner {width: 100%; display: block; height: 100px; background :#CCC;}
I then want that banner to go outside the margins of #wrapper and reach the sides of the window, no matter how big the window is.
How can I achieve this?
Here is a JS fiddle of what I can piece together: http://jsfiddle.net/MCms6/
To solve all your issues:
Make a container element for your #banner, so it can follow the flow of your document. Also position it relative to make it the parent to your banner.
Position #banner absolutely and you can stretch it as wide as you want.
UPDATE - DEMO
HTML
<div id="wrapper">
<h1>my content my content my content my content my content my content my content my content </h1>
<div id="bannerHolder">
<div class="banner">
my Banner
</div>
</div>
<h1>more content more content more content more content more content more content more content</h1>
</div>
CSS
#wrapper {
width: 140px;
display: block;
margin: auto;
background: #ccc;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
border: 1px solid #f00;
position: absolute;
background: #555;
left: 0;
right: 0;
height: 100px;
}
I am creating Web user interface for a Web application. The interface has header, footer and in between two rectangles in horizontal line. Rectangles are separated by space. All these features are created using tags.
Below is given CSS to format the left rectangle:
#sidebar1 {
position: absolute;
left: 150px;
width: 450px;
height:250px;
background: #EBEBEB;
padding: 20px 0;
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
The problem is that when you squeeze or extend the window of browser those rectangles change position or overlap one another. This is not acceptable.
I have tried other options of position keyword in CSS such as position: fixed or position:relative or static but the representation is still wrong. Likewise I tried float:left and float: right but that still makes the rectangles to move and overlap. I want those rectangles to stand still despite that you are extending or squeezing the window.
What are your solutions, please?
Best regards
Current code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Spring Web MVC project</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
/*padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: black;
}
#header {
background: green;
/* top: 100px; */
text-align: center;
margin: 55px;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#sidebar1 {
position: absolute;
left: 150px;
width: 450px; /* since this element is floated, a width must be given */
height:250px;
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
#sidebar2 {
position: absolute;
right: 150px;
width: 450px; /* since this element is floated, a width must be given */
height: 250px;
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
#footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:green;
width:95%;
margin:55px;
position: relative;
bottom: -300px;;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body>
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<!--<div id="container"> -->
<div id="sidebar1">
<h3>blah blah</h3>
<p><li>blah blah</li> </p>
<p><li>blah blah</li> </p>
<p><li>blah blah</li></p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>blah blah</h3>
<p><li>blah blah</li> </p>
<p><li>blah blah </li></p>
<p><li>blah blah</li></p>
<!-- end #sidebar2 --></div>
<p>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
</p>
<p><br class="clearfloat" />
</p>
<div id="footer">
<p>Footer</p>
<p>Terms & Conditions</p>
<!-- end #footer --></div>
<!-- end #container --> <!--</div> -->
</body>
</html>
There's no reason to absolute position anything here...it's just going to lead to headaches. In general, do absolute position only when absolutely necessary, which for me is almost exclusively when I have to float something over the top of something else. Otherwise, everything is relative to something else, as is default.
Here's a simple strategy to make this work:
<div class="pagecontainer">
<div class="header">
Header Goes Here
</div>
<div class="bodycontainer">
<div class="floatleft">Leftbox</div>
<div class="floatleft">Rightbox</div>
<div class="clear"></div>
</div>
<div class="footer">
Footer Goes Here
</div>
</div>
Style follows:
.floatleft {
float: left;
otherstyle: here;
margin: 5px;
}
.clear {
clear:both;
}
Yes, this is abstract, so you'll have to customize it for your particular purposes.
The key to avoiding the overlaps is ensuring that your divs inside the body container never exceed the size of the bodycontainer parent element (don't forget margins and in some cases padding (stupid IE) count toward that value) and that both are floated left with a clear float afterward.
If you want to make it scary simple, use a grid such as 960.gs
In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.
I am currently using this CSS:
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
But the full page width isn't filled with this css code.
Any help? Thanks!
I use sticky footer: http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}
<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.
This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.
you could make the footer div absolute to the page like this:
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
I use a few DIV elements for each section of my webpages.
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.
I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.
if you want that your footer be fixed on your page :
.footer{ position:fixed;}
but if you want your footer fixed end of page :
see that
I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
Thanks!
This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.
Use below styling for footer element
In-line style
External style sheet using class attribute in Div
<div class="footer"></div>
style.css
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
External style sheet using id attribute in Div
<div id="divfooter"></div>
style.css
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
You can use this styles in your CSS to achieve your goal
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.
html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
I was facing same issue and solved it with using jquery.
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
}
</script>
What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it.
If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.