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>
When I test this about 30% of the lower part of the image is being positioned at top right.
I can't understand why.
If I for example positioned top left or top right it works fine.
It never works if I give positioned as in this example bottom right or bottom left.
If I give positioned bottom left then again about 30% of the lower part is being positioned at top left.
Here is the complete markup and css
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
body
{
background-image:url(uppsala.jpg);
background-position: bottom right;
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
The image is at the bottom right of the body element, but the problem is that the element isn't as tall as you think it is so it looks like it's in the wrong place.
Add this to the CSS rules:
body, html {
min-height:100%;
}
You should declare height in css rule
body,html
{
background-image:url(uppsala.jpg);
background-position: bottom right;
background-repeat:no-repeat;
height:100%;
}
I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?
Code Below:
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}
You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.
Works in IE8+ and the good browsers, so browser support is actually quite good
http://css-tricks.com/box-sizing/
You can try two things...
1) changing the height of the wrapper, navigation, content and inner to something like 98%.
2) try adding a transparent 1px solid border to the wrapper and other elements. This often shifts the margin to margin relationship of elements.
Hope this helps
I'm trying to have an element with a greater width then the body, but not cause horizontal scrolling.
http://jsfiddle.net/hYRGT/
This hopefully demonstrates my problem somewhat.
The #header contains the #imghead and is set to 960px width.
What I want is the browser to 'think' the page is 960px wide.
Because #imghead is more wide then #header and positioned relative so it's in the center.
I'm not able to use a background-image because #imghead is going to be replaced by a flash component.
I'm also not able to use overflow:hidden because I DO want the element to show outside the 960px. I just don't want it to cause h-scrolling.
I do not want to disable h-scrolling altogether, I'd really love a CSS solution. But if javascript is the only way of dealing with this, I guess it would do.
Can't you just absolutely position it relative to the body, 50% from the left and then on the inner element do a negative left margin of half the total width of the element itself which would center it?
I think I got what I wanted:
http://jsfiddle.net/hYRGT/3/
Just in case jsfiddle would be down:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>WEBSITE title</title>
</head>
<body>
<div id="header">
<div id="imghead"><img src="/img.jpg" alt=""/></div>
</div>
<div id="wrapper" class="index">
<div id="container">SOME CONTENT</div>
</div>
</body>
CSS:
/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}
/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}
#wrapper{
z-index:12;
position:relative;
height:auto!important;
min-height:100%;
width:100%;
background:#0f0;
overflow:auto;
overflow-x:auto;
overflow-y:visible}
#container{
width:960px;
margin:0 auto;
overflow:auto;
background:#00f}
#header{
z-index:50;
position:relative;
overflow:visible;
width:960px;
margin:0 auto;
height:0px;
background:#f00}
#imghead{
width:1100px;
position:relative;
left:-70px;
background:#ff0}
The content overlaps the header by design,
I hope this helps someone.
1 limitation is that the header does not horizontally scroll,
but in my design that is not necessary.
Tested in FF3, IE8, S4 and C5
So, i have a div which i want to take up the entire width of the browser, -40px on each side,
my idea was to have
width: 100%; and margin: 0 -40px; however this does not work.
I dont want to use width: xx% as i have no control over this.
Update
Ok got it going at http://jsfiddle.net/ApcLv/
but now my question is:
How do i get this to be centered?
Wrap it in a another <div> and give the parent <div> a width:100% property, and the child <div> a margin:40px; property:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head >
<title >Example</title>
<style type="text/css">
#wrapper {
width:100%;
}
#main {
margin:40px;
background-color:red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
This is a test
</div>
</div>
</body>
</html>
have a div in a div... the outer div can be 100% wide with a 40px padding and the inner div can be 100% wide too.. which will take up the inner div's width - the 40px padding. :)
Simply
[..]
<body>
<div style="margin: 40px">Blabla</div>
</body>
[..]
..will create a DIV that takes up all available horizontal space, minus 40px on each side.
A block level element always uses all its available horizontal space unless otherwise specified. A div with exactly 40px to each side of the BODY element will thus always be centered. No need for wrappers to achieve this.