Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?
I thought I had done this before with negative margins, but can't get it to work now.
Demo: http://jsfiddle.net/Znarkus/s95uz/
<div id="main">
<div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content">
</div>
</div>
You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;
I've modified your fiddle here: http://jsfiddle.net/s95uz/14/
<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>
<div id="main">
<div id="inside">
<div id="banner">
I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content"></div>
</div>
</div>
Just add overflow : hidden to the div "main" css.
Adding this to an element hides the possible conditional sidebars.
Your new css will look like;
#main {
width: 500px;
margin: 0 auto;
background: red;
position: relative;
overflow:hidden;
}
You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport:
#media only screen and (max-width: 550px) {
#banner { display: none;}
}
Related
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
I've 3 divs, each of them has position: absolute.
First is header, and its working.
Header has constant height, and second div "content" also works.
Third div is "footer".
"Content" has changeable height and when "content" is higher than web-browser window the "footer" is ON "content". I want to "footer" under "content" irrespective of content height.
My header is 300px height, content has margin-top: 300px. I can't use the same for the footer, because content hasn't got constant height.
I don't want to set one div with position: absolute, and these 3 divs place inside this one.
div#header{
width: 960px;
height: 200px;
left: 50%;
margin-left: -480px;
position: absolute;
}
div#content{
width: 960px;
border: 1px solid black;
left: 50%;
margin-left: -480px;
position: absolute;
margin-top: 200px;
}
div#footer{
width: 960px;
height: 30px;
left: 50%;
margin-left: -480px;
position: absolute;
bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */
clear: both;
}
You're over positioning.
You do not need to position everything absolutely unless there's something you aren't sharing.
JSBin Example
If you are willing to use position : relative which is a tad better than position : absolute in cases like this, http://jsfiddle.net/vFTXg/1/ - Try editing the value of your content's height here and your footer will be automatically adjusted.
CSS
.header {
position : relative;
width : 100%;
height : 90px;
background-color : #000;
}
.content{
position:relative;
width : 100%;
min-height : 200px;
background-color : #f00;
}
.footer{
position:relative;
width : 100%;
height : 50px;
background-color : #0f0;
}
HTML
<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>
I would recommend using CSS floats
Do something like this:
<div id="wrapper">
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
<div class="clear"></div>
</div>
Set the site-width on the wrapper and let the other divs have the same width.
Use float:left on header, content and footer
Set clear:both on the clear-div.
Now you can set the height on the elements you want to have a fixed hight - and you don't have to bother with absolute positioning.. If you insist on using positioning, you could just position the wrapper.
In the future browser can calculate. For your example this could be nice to calculate the min-height for the content to set the foorter to the bottom if content height is low and to set the footer after the content if it has a heigh value. E.g.:
HTML:
<div id="header" class="content">header</div>
<div id="content" class="content">content</div>
<div id="footer" class="content">footer</div>
CSS:
html, body {
height: 100%;
}
.content {
position: relative;
width: 960px;
}
#header {
height: 200px;
}
#content {
border: 1px solid black;
min-height: -moz-calc(100% - 302px);
min-height: -webkit-calc(100% - 302px);
min-height: calc(100% - 302px);
}
#footer {
height: 100px;
}
Unfortunately only firefox and IE9 and higher support calc at the moment, so this is more theoretically. If you want to test it, see this jsfiddle.
If you want to do this with all current browser you need to use javascript.
If you want something to be of constant width and centered try this
#footer,
#header,
#footer {
width: 960px;
margin: 0 auto;
}
and forget about
left: 50%;
margin-left: -480px;
position: absolute;
I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).
I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).
This is very hard to explain, so I did the best I could.
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Here's a screenshot of the problem:
Just coming to this late, but in case anyone else runs across this in the future, here's your fix.
Your CSS Code:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Your HTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header.
Your .bottom-wrapper padding-top should be the height of your header wrapper's content.
Cheers!
You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10 is floating above (visually) an element with z-index: 5.
Give the content z-index: 5 and see if it works.
I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.
You could do the same thing with a solid color background, though, arguably, it would have been easier.
2 notes: the header has a set height, I have only tested in FF and Chrome.
Just came up with a new solution to this type of problem that I'm quite happy with.
Use clip-path on the content that needs to hide behind the transparent element. Then update the clip-path dynamically with js on window scroll.
HTML
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const elementToHide = document.getElementById("content");
elementToHide.style.clipPath = `inset(${windowScrollTop}px 0 0 0)`;
});
Dynamic sticky content
In my case I had an element that I switched to position: sticky after scrolling past it. The #sticky content needs to be relative to the dom elements that came before it until we have scrolled far enough. Here's how I accounted for that:
HTML
<div id="otherStuff">Here's some other stuff</div>
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const stickyElement = document.getElementById("sticky");
const elementToHide = document.getElementById("content");
const stickyElementTop = stickyElement.getBoundingClientRect().top
if(windowScrollTop >= stickyElementTop){
stickyElement.style.position = "sticky";
elementToHide.style.clipPath = `inset(${windowScrollTop - stickyElementTop}px 0 0 0)`;
}
else {
stickyElement.style.position = "relative";
elementToHide.style.clipPath = "none";
}
});
I fixed this problem using the background property with a color, you can use var even if you'd like to
.header{
width:100%;
position:fixed;
z-index:10;
background:blue;
/* background: var(--my-var-value); You can do this if needed*/
}
Does #header have a set height?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Pretty sure this wouldn't work in IE though...
Fix the position of the content div below the header + overflow-y the content div.
I have fixed background image
The header background is transparent
I don't want my content to override my transparent header
I came up with a solution scrolling the div instead the body:
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
I too faced similar issue, but solved it using a simple dirty hack
1) have a white image in images folder
2) then add this css in header style
z-index:999; // to make header above the scrolling contents
background-image : url("../images/white.png"); // to hide the scrolling content
3) It is done!!
The header's z-index is set to 1000, so the z-index of the container would have to be 1001 if you want it to stack on top of the header. https://codepen.io/richiegarcia/pen/OJypzrL
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1001;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
I was having the same problem. I just used added z-index:10 to the .header in CSS.
I solved this problem by adding another fixed div positioned right under my header with margin-top of the size of my header.
HTML:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="fixed-container">
Content...
</div>
CSS:
#fixed-container{
margin-top: header_height;
height: calc(100% - header_height);
width: 100%;
position: fixed;
overflow: auto;
}
I was facing the same problem, so the answer that tize gave helped me alot, I created a div right under my header and used some css(z-index, overflow and background), so the main element is scrollable and hid behind the transparent header:
HTML:
<header>
<h1>Hello World</h1>
</header>
<div class="inv-header"></div>
<main>Content Here...</main>
CSS:
header{
position:fixed;
background:rgba(255,255,255,80%);
top:0;
width:100%;
z-index:10;
}
.inv-header{
position:fixed;
top:0;
height:12.8%;
width:100%;
background:inherit;
}
main{
margin-top:5.9%;
padding-top:1%;
overflow:auto;
}
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.
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.