I'm trying to make a div element that is the same width as the screen so that I can have part of the background a different color than the rest. I would prefer that it would be with relative position, because with absolute I have to manually set it's vertical position, and that'd get messy, though the scrollbar wouldn't appear.
Right now, I do have it so that a div will take the area of the screen and can be a different color, but it causes a scrollbar to appear. The div is over the right side of the screen by using
margin-right: -21px;
but that causes the scrollbar. If I remove that, the bar goes away but then there is a portion of whitespace on the right side of the screen. Using
overflow-x: hidden;
will hide the scrollbar, but won't prevent scrolling horizontally.
How can I make it so the scrollbar doesn't appear and I can't scroll horizontally? I have a JSFiddle for what I'm currently using.
Thank you in advance for any suggestions on how to fix this.
Although there are a few things you should fix up, removing the margin from the body, html will do the trick.
Get rid of the -21 margins and just add this style.
body, html {
margin: 0;
}
Here's your fiddle.
dirty trick that might work:
<!DOCTYPE html >
<html>
<head>
<title> Bla! </title>
<style>
div.fullWidth { display:inline-block; width:100%; background-color:yellow }
div.body { position:absolute; left:0px; top:0px; background-color:green; width:100%; height:100%; overflow:auto}
body { overflow:hidden; }
</style>
</head>
<body>
<div class='body'>
line before the div
<div class='fullWidth'> Line inside div</div>
line after div
</div>
</body>
</html>
Related
I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.
The whole css:
#content{
width:100%;
height:100%;
background:grey;
}
#left-panel{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow-y:auto;
}
Can somebody help me fixing this with pure CSS?
Fiddle: http://jsfiddle.net/a2wn8x5z/1/
Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).
So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:
Scrollbar Fixer
perhaps your problem is in this code here
<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>
remove the width:110%; and it should be good to go.
Here's the Updated Fiddle
Edit
I think I misunderstand what's the problem before.
Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper
left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;
and remove
width:100%;
here's the Updated Fiddle
to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;
Edit Two
the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this
#wrapper{
background:gray;
}
I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.
here's the Working Fiddle
First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:
Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.
<div id="left-panel"></div>
<div id="content"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
}
Codepen: http://codepen.io/anon/pen/yoHxl
Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.
<div id="content"></div>
<div id="left-panel"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
z-index: 1;
}
Codepen: http://codepen.io/anon/pen/HgwDx
Best,
Marek
My site consists of a side menu div and a main content div. I've floated the divs left and used percentages so that the columns fill the entire page. However I'm also using min-widths because I want the side menu to be no smaller than 205px wide and the main content to be no smaller than 780px. The site needs to be no smaller than 985px wide however I still want the content to be flexible enough to fill the screen.
My problem is when I resize the window (less than 985px wide) the main content div moves underneath the side menu. Where am I going wrong?, The div should stay in the same position, next to the side menu, but the horizontal scroll bar should kick in. The content should then fill the screen.
Fiddle
THE HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="side-bar">
<p>side bar</p>
</div>
<div id="main-content">
<div id="content">
<p>some content</p>
</div>
</div>
</div>
</body>
</html>
THE CSS:
body
{
margin:0;
padding:0;
font-size:100%;
font-family:Arial;
}
p
{
margin:0;
padding:0;
}
#wrapper
{
width:100%;
min-width:985px; /*site no smaller than 985px wide*/
height:auto;
}
#side-bar
{
width:15%;
min-width:205px; /*nav sidebar no smaller than 205px wide*/
min-height:672px;
background-color:Gray;
float:left;
}
#main-content
{
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}
#content
{
width:740px;
height:500px;
background-color:#ccc;
margin:0 auto;
}
Someone posted the answer but for some reason its now disappeared so I can't take credit for fixing the issue.
I created a wrapper that had a min-width of 985px. I then used percentage values for the side and main content divs 15% & 85% respectively. However I didn't take into account that its 15% and 85% of the 985px wrapper.
My side bar was 15% wide with a min-width of 205px, however 15% of 985px is only 147.25px so the extra pixels was forcing the main content div below the side bar.
Hope that makes sense? Thanks for helping me out :)
The reason that your main content div goes below the menu div is due to the way that the box model works. If you change your main content div to be a inline-block, it will stay to the right of the menue. Here is a jsfiddle to show you how you can do it.
#main-content
{
display:inline-block
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}
Blocks floated to the same side only stay next to each other if there is enough horizontal space.
If I really wanted a horizontal scrollbar, I'd experiment with table layout (display: table-row, display: table-cell).
Create a div after the main-content div and give it a class of 'clearfix' and the following style:
.clearfix{
clear:both;
}
I think the problem might be that you are not clearing the floats, which is why you container div (wrapper) is messing up.
I'm trying to brush up on my HTML and CSS again and I was trying to make a simple layout. Here is the HTML/CSS for my simple site.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My website</TITLE>
<META CHARSET="UTF-8">
<style type="text/css">
* {
padding: 0px;
margin: 0px
}
html, body {
margin:0;
padding:0;
height:100%;
border: 0px;
}
#TopBar {
width:100%;
height:15%;
border-bottom:5px solid;
border-color:#B30000;
}
#MidBar {
background-color:black;
height:70%;
width:70%;
margin-left:auto;
margin-right:auto;
}
#BottomBar {
position:absolute;
bottom:0;
width:100%;
height:15%;
border-top:5px solid;
border-color:#B30000;
}
h1 {
font-family: sans-serif;
font-size: 24pt;
}
#HEADER {
text-align:center;
}
li {
display:inline;
}
#copyright {
text-align: center;
}
</style>
</HEAD>
<BODY>
<DIV ID="TopBar">
<DIV ID="HEADER">
<HEADER>
<H1>My website</H1>
<NAV>
<UL>
<LI>About me
<LI>Contact me
<LI>My blog
<LI>My portfolio
</UL>
</NAV>
</HEADER>
</DIV>
</DIV>
<DIV ID="MidBar">
<DIV ID="PhotoSlideshow">
test
</DIV>
</DIV>
<DIV ID="BottomBar">
<FOOTER>
<P ID="copyright">Name here ©
<?PHP DATE("Y") ECHO ?> </P>
</FOOTER>
</DIV>
</BODY>
</HTML>
Given the heights I've applied to my div elements I expected everything to line up nicely however it appears that the bottom div is higher than the intended 15% and overlaps onto the middle div, see here demonstrated by the red border at the bottom...
Where am I going wrong? I'm sure it's something simple.
You should understand how the box model works... You are using borders which are counted outside the element, so for example if your element is 200px in height, and has a 5px border, the total element size will be 210px;
So considering this as the concept, what you are having elements which sums up to 100%, and you are using borders too, so that is exceeding the viewport which will result in vertical scroll...
Also you don't have to use position: absolute;, you are making it absolute, just to avoid scrolls but that's a wrong approach. Absolute element is out of the document flow, and will give weird results if you didn't wrapped inside a position: relative; element.
Demo
Few Tips :
Use lowercase tags
Avoid Uppercase ID's unless required
Using 100% vertically is very rare, designers generally use width: 100%; for making the layouts responsive. So if you don't have any specific reason to go for 100% vertical elements, don't go for it..
Solution:
Still if you want to stick with the vertical layout spanning to 100% in height, you should use box-sizing: border-box; property...
What box-sizing will do here?
Well, using the above property, it will change the default behavior of the box-model, so instead of counting the borders, paddings etc outside the element, it will count inside it, thus it will prevent the viewport to be scrolled.
I will provide you an example, which I had made for another answer.
Demo 2 (Updated, had forgot to normalize the CSS)
Explanation for the above demo, if you look at the CSS, I am using
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
which will make every element paddings, borders etc to be counted inside the element and not outside, if you mark, am using a border of 5px; and still, the window won't get a scroll bar as the border is counted inside the element and not outside.
There are many things a bit off with your code, however the straight forward answer is that borders are part of the box model, therefore part of the height calculation. So the height of your div is 15% of the height + the width of your borders, thus it is oversized.
Please see this explanation of the box model:
http://css-tricks.com/the-css-box-model/
I think it has to do with your borders (each of which is 5px). Since you have your TopBar, MidBar, and BottomBar have percentage heights that add up to %100, WITH additional borders, you have a problem of having an effective height of greater than %100, and then, because you have BottomBar with an absolute position at the bottom, it doesn't force the page to scroll, but simple induces some overlap between the MidBar and BotomBar divs.
Remove "Position: absolute" from: #BottomBar. That should do the trick.
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.
I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background.
Is there a solution better than using position:fixed or absolute?
I think there are possibly other styles over-riding some tests I do in firebug.
Thanks for your help
Regards
Judi
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
<div class="podbar">
Put your footer here
</div>
This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.
Works in pretty much every browser I have tested.
I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.
This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
Here you have an example and explanation http://ryanfait.com/sticky-footer/
Edit: Since that site is offline, here is another example of this working: https://gist.github.com/XtofK/5317209 and https://codepen.io/griffininsight/pen/OMexrW
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
height: 50px; /* '.push' must be the same height as 'footer' */
}
footer {
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
You could set a min-height on #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.
As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-height for #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.
I've figured it out. Html had a css property for the background saying the colour white.
I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.
If you use the Compass library for Sass, there is also another option. You can use Compass’s sticky-footer mixin (demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.
Don't use position:absolute use position:relative instead.
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolute will stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.