Whenever i try to make a div with width 100%, it does not go across the whole page, it leaves small margins on either side(top bottom left and right), i would like the div to go across the whole page, such as the header bar on the top of this page.
You have to set margin and padding of body element to 0. Like this (in CSS):
body
{
margin: 0;
padding: 0;
}
And also remember about setting margin of div element to 0.
This is a body margin from the browser reset margin and padding:
body {
margin: 0;
padding: 0;
}
Try a CSS Reset:
* { margin: 0; padding: 0; }
That's a simple ones, there are thousands of more advanced ones across the web.
Do you have the body margins set to 0px? In your stylesheet set body { margin:0px; }. If you want to keep the body margins, you need to adjust the width of the div. Something like div#idOfDiv { margin-left:-10px; margin-right: -10px }
Set the padding to 0 for the body tag:
body {
padding: 0;
}
There is no need for padding as the padding is on the inside of the div and is measured as a distance from edge. Just set margin to 0px if you want a specific margin set then do it like #sho suggested and set them individually.
Related
How can I remove the space to the div and the top of the screen?
There are a few pixels that can be removed with:
margin-top: -8px;
But because not all users have the same screen, so probably for anyone on it will show a little differently. How do we fix it?
Most browsers set an initial padding on body, you can remove it.
html, body
{
padding: 0;
margin: 0;
}
This is probably due to browser specific UA styles,
try resetting the UserAgent with
html,body{
margin: 0;
padding: 0;
}
for better undestanding User Agent and resets read this
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
In my .css, I'm using a fixed width, centered layout with:
#page-container {
width: 760px;
margin: auto;
padding-top: 10px;
}
All pages using the .css are the same width. If I insert bullet points into a div, it seems to move to the left by a few pixels and is no longer centered. This also happens if I insert an iframe.
Perhaps someone more experienced could suggest the cause?
[Edit]
It's being caused by the scrollbar appearing as I add content. Is there anything I can do about this?
To keep the page from shifting, you should set the body style to overflow:scroll so there's always a scrollbar.
What you're probably seeing is the default margin and padding of ul and li elements.
Use a web developer tool such as Firebug and hover over the element, you'll see the margins and paddings.
For example a ul element has some default margin (in yellow) and padding (in purple):
What you can do is apply CSS to reset those defaults:
ul { margin: 0; padding: 0; }
ul li { margin 0; padding: 0; }
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
I'm using a large background in <body> tag and I want to make a container div with a width of 960px.
I want the container div to be positioned 15px down from the top, I guess i have to use position:absolute.
My dilemma is; the rest of the div's inside the container have to contain the same position or i could continue this like an normal 960px wide website?
Sorry for my bad english.
Please help me!
This should give your container a 960px width and center it with a 10px top (and bottom!) margin.
#container {
width: 960 px; /* set width for container */
margin: 10px auto; /* 10px top and bottom, center screen */
}
You don't have to use absolute positioning. A simple
body {margin: 0; padding: 0}
#container {width: 960px; margin: 15px 0 0;} /* or margin: 15px auto 0 */ if you want it centered
will do :)
You do not need to use position:absolute; what that does is puts a div in a specific place on the page irrleevant of broswer window size which isn't what you want in this instance,
What you need is simply a margin-top:$$px;
If you are using an id use the # identifier:
#container {
margin-top:15px;
width:960px;
}
If you are using a class use the . identifier:
.container {
margin-top:15px;
width:960px;
{
All divs within this tag can be written and position as they normally would, no extra padding or margins necessary.