I have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
Related
I have not been able to get any of the solutions to work.
The footer keeps on leaving a gap at the bottom of this page
The footer leaves a gap of white space.
I have tried
#footer {
position:absolute;
bottom:0;
}
and it seems to make it worse...
Any ideas?
UPDATE:
still can't get it to work. tried setting the height of the body and wrapper. tried all code below. and it just ends up overlapping
Try this...
#footer-wrap {
position: fixed;
bottom: 0;
width: 100%;
}
Here you go:
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
}
Based on your question I don't think you want to use position: fixed because if your page were to get any taller (to the point that vertical scrolling was required), the footer would stay attached to the bottom of the page wherever you went. I think what you want is this:
<style>
.footer-wrap{position: absolute; bottom: 0px; width: 100%;}
body{overflow: hidden;}
</style>
You need to add the overflow: hidden on the body because the 100% width on the footer will create a horizontal scroll.
The footer is an automatically defined element in HTML5 you basic page should look like this and everything should be place
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place title here</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
A good CSS configuration for each could be something like
<style>
header {
background-color:place color here;
}
nav {
background-color:place color here;
}
main {
background-color:place color here;
}
footer {
background-color:place color here;
}
</style>
NOTE:Footer and header should be same color as the body color makes page more presentable
I was able to fix it by setting a bottom margin in the post
article.post-72.page.type-page.status-publish.hentry {
margin-bottom: 124px!important;
}
and adding some height and overflow the the footer
.footer-wrap {
height: 115px;
overflow: hidden;
}
Try this:
#footer {
position:fixed;
bottom:0;
width:100%;
}
I believe that is what you are after. Position absolute relates to the document whereas position fixed relates to the screen view.
EDIT
Assuming your footer has a height of 50px say, you need to add a margin to an element that is above the footer in the DOM, some sort of wrapper ideally that appears on every page of your site (this makes the most sense structurally.
Even if you add this element yourself assuming you have access to a template.
So it could look something like this:
<header></header>
<div class="content">
//wrap all of your main content block here
</div>
<footer></footer>
Then for the css add margin-bottom:70px to the .content wrapper
I might be a little late, but I stumbled upon this today and I know the solution for it.
Just use: display:flex;
This'll make this white space vanish. Hope this helps someone.
Can anyone enlighten me to why the following occurs with this test case?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
section is sizing to it's contents, try setting width:100% on .section
In addition, you may want to add this to .wrap
margin-left:auto;
margin-right:auto;
that will center the wrap div
I have a page with content contained in <html></html> - I'm trying to get a sidebar to span all the way down to the bottom of the page, even if there's vertical overflow.
This is working if there's no vertical overflow, but if there is, the sidebar just stops at wherever the bottom of the page was when the page loaded.
If I use chrome dev tools, I can see that all elements - all the way up to <html>, have their height limited to however big the window was when it loaded. Is this normal? My problem would be solved if I could tell <html> to somehow span vertically to include all content, but I don't know if that's the right solution.
I have set the sidebar and all parents to height:100%, including html:
html, body, .durandal-wrapper, #shell-row, #sidebar {
height: 100% !important;
}
I've been working on getting this demod in jsfiddle but can't get it working. here's what it looks like on my end:
You could use css tables to achieve this.
FIDDLE1 FIDDLE2
Markup
<div class="container">
<div class="sideBar">sideBar</div>
<div class="main">
Content.
</div>
</div>
CSS
.container
{
display: table;
}
.sideBar
{
display: table-cell;
background:pink;
width: 100px;
}
.main
{
display: table-cell;
background:yellow;
overflow:auto;
vertical-align: top;
}
Faux columns is the usual CSS pattern for your issue:
http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns
I have a main container div, and I'd like it to be margined from the top of the screen exactly, for example, 10% of the screen width. This way I won't have problems with non-uniform screen sizes etc..
I already found a dirty workaround which is putting a 1px by 1px image of the color of the background, right before the div, and then style it to have 10% of the width of the screen. But this looks quite dirty, doesn't it? Is there any better solution?
Same solution as Rubens without using tables. I've also placed some code to deal with the top margin you were asking about but using padding instead.
<html>
<head>
<title>...</title></head>
<body>
<div id="content">
Your whole page comes here...
</div>
</body>
</html>
* {
padding:0;
margin:0;
}
html, body {
height:100%;
}
body {
padding:10% 0 0;
}
#content {
width: 850px; // replace with your desired width
margin:0 auto;
}
The solution I find very elegant is to insert the page in a table, beginning right after the body, and terminating right before it.
You'd have this:
<html>
<head><title>...</title></head>
<body>
<table id="content"><tr><td>
Your whole page comes here...
</td></tr></table>
</body>
</html>
Now simply decide the size of the page, using the style:
#content {
width: 850px;
margin-left: auto;
margin-right: auto;
}
I want to add space in the HTML document like the ones inside the orange rectangle. I don't know the technical term for what it's professionally called. Apologies.
If you are looking to center your web page and you are using a fixed width on your main container this can easily be achieved.
CSS
.container {
margin:0 auto; /* this will center the page */
width:960px; /* use your width here */
}
HTML
<body>
<div class="container">
<!-- all your great content here -->
</div>
</body>
If you need help applying this to your html/css please post your html and I would be glad to help you.
Why not do this? :
<style type="text/css">
html, body {
margin: 0;
border: 0;
width: 100%;
}
body {
padding: 0 20px;
}
#main {
margin: 0 auto; /* in case you want to set a fixed width on this as well */
}
</style>
<body>
<div id="main"></div>
</body>
This way, depending on the width on the window, the main div will resize and there will always be a fixed space on both sides. If you want the main div have a fixed width and the spacing on the sides to be resized automatically, use the other solutions.
Those would be margins. But your better option would be to wrap the main area in a div or other block element/sectioning root, set it to the width that you want, and then center it with margin: 0 auto;
you need margins. set the style to margin:0 auto; that will center your div