Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I coded a webpage recently, I was able to get the result. But I am now having a issue with css viewport. My webpage only shows the left part of my content when minimizing the windows instead of showing the full content, please help guys.
I currently hosted the page in github.
Webpage github link: https://jtmuthu.github.io/card1/
Youre using fixed values for positioning, that wont work with resizing the page.
You need to work with percentages, responsive positioning and other fluid values.
Ive created a snipped from your github page and changed the neccessary styles.
body {
background-color: hsl(225, 100%, 94%);
margin: 0;
height: auto;
width: auto;
font-family: 'Red Hat Display', sans-serif;
}
.bg-img {
width: 100%;
height: auto;
}
.card {
background-color: hsl(225, 100%, 98%);
color: black;
position: relative;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
max-width: 450px;
margin: 50px auto;
}
.music {
background-color: rgba(232, 232, 232, 1);
border-radius: 10px;
color: black;
height: 90px;
width: calc(100% - 120px);
margin: 0 60px;
}
.cardimg {
border-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
h1 {
text-align: center;
padding-top: 40px;
}
.p1 {
text-align: center;
width: 70%;
line-height: 2;
margin-left: 65px;
}
.msic {
position: relative;
left: 20px;
top: 20px;
}
.p2 {
float: right;
padding-right: 140px;
line-height: 2;
}
a {
position: relative;
left: 200px;
bottom: 14px;
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: blue;
}
.p3 {
color: hsl(224, 23%, 55%);
padding-left: 180px;
padding-top: 30px;
}
.p3:hover {
color: black;
font-weight: bolder;
}
.btn {
position: relative;
left: 40px;
top: 20px;
color: white;
background-color: rgb(56, 41, 224);
height: 50px;
width: 360px;
border: none;
border-radius: 10px;
font-size: 16px;
}
.btn:hover {
background-color: rgba(56, 41, 224, 0.8);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" href="https://jtmuthu.github.io/card1/images/favicon-32x32.png">
<title>Summary Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#300&display=swap" rel="stylesheet">
<style></style>
</head>
<body>
<div class="bg">
<img class="bg-img" src="https://jtmuthu.github.io/card1/images/pattern-background-desktop.svg" alt="bg">
</div>
<div class="card">
<img class="cardimg" src="https://jtmuthu.github.io/card1/images/illustration-hero.svg" alt="hero">
<h1>Order Summary</h1>
<p class="p1">You can now listen to millions of songs, audiobooks and podcasts on any device anywhere you like!</p>
<div class="music">
<img class="msic" src="https://jtmuthu.github.io/card1/images/icon-music.svg" alt="msic">
<p class="p2"><strong>Annual Plan</strong> <br> $59.99/year</p>
Change
</div>
<div class="bottom">
<button class="btn" type="button" name="button">Proceed to Payment</button>
<p class="p3">Cancel Order</p>
</div>
</div>
</body>
</html>
It's because you hardcoded the positions. And how big or small the browser window, they stay the same.
My sugestion: use a flexbox. With that, you can keep everything centered without left or bottom values. (Note: if the browser window is smaller than the card there obviously will be cut off a part. For that you can use media queries).
<body>
<div class="flexbox">
<div class="container">
// All the content here WITHOUT POSITIONING
</div>
</div>
</body>
And as css
.flexbox{
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 450px;
height: 660px;
}
And a fiddle
probably because you using,
left: 460px;
instead this try to use <center> tag.
it is advisable to use media query for responsive
Related
I am fairly new at making responsive css and I have not done much yet.
If you open the following code in fullscreen and change the height of the tab, the smaller the height, the more of a gap there is between my hero and about section.
I want the gap to remain the same size on all devices.
Hopefully you can help,
Thanks.
body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#header {
border-radius: 15px;
margin-top: -0.8%;
background-image: url(./images/DJI_0410-Enhanced.jpg);
background-size: cover;
background-position: right;
width: 98.5%;
height: 94%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 8%;
}
h1 {
color: #f7f4f7;
margin-top: 10%;
font-size: 4.5vw;
font-weight: 700;
margin-bottom: 0;
}
#subTitle {
color: white;
}
h2 {
font-size: 3.6vw;
font-weight: 600;
margin-top: 10%;
}
button {
font-family: "Poppins", sans-serif;
font-weight: 600;
width: 7.5rem;
height: 3rem;
border-radius: 10px;
cursor: pointer;
}
.bookNow {
background-color: #f8f8f8;
color: #2B3758;
margin-right: 0.4rem;
transition: 200ms linear;
border: none;
}
.bookNow:hover {
background-color: #e6e3e6;
color: #2B3758;
}
.learnMore {
background-color: #2B3758;
color: #f7f4f7;
margin-left: 0.4rem;
transition: 200ms linear;
border: none;
}
.learnMore:hover {
background-color: #4e6090;
color: #f7f4f7;
}
#navBar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 2% 8% 0% 8%;
}
.logo {
width: 18%;
height: 18%;
}
li a {
text-decoration: none;
}
.page {
color: white;
}
.otherPages {
color: #585858;
transition: 200ms linear;
}
.otherPages:hover {
color: white;
}
.bookNow {
margin-right: 8%;
overflow: hidden;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
font-weight: 400;
}
.bookNowNav {
background-color: rgba(255, 255, 255, .3);
overflow: hidden;
border-radius: 15px;
border: 2.5px solid white;
padding: 0px;
transition: 200ms linear;
color: white;
margin-left: 25px;
}
.bookNowNav:hover {
background-color: rgba(230, 230, 230, 0.5);
}
#about {
position: absolute;
margin-top: 860px;
left: 50%;
transform: translateX(-50%);
width: 82.5%;
}
#aboutImage {
display: inline-block;
background-image: url(./images/DJI_0216.jpg);
background-size: cover;
background-position: center;
width: 47.8%;
height: 475px;
border-radius: 15px;
margin-right: 2%;
}
#aboutInfo {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 47.8%;
margin-left: 2%;
padding-top: 10px;
margin-top: -38px;
}
h2 {
position: justify;
margin-bottom: 30px;
}
.info {
color: rgb(140, 140, 140);
line-height: 30px;
text-align: justify;
height: 240px;
font-weight: 300;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Above Photography</title>
</head>
<body>
<div id="header" class="center">
<div id="navBar">
<img class="logo" src="./images/AbovePhotographyLogo.png" alt="Logo">
<nav>
<ul class=n av__links>
<li><a class="page" href="#">Home</a></li>
<li><a class="otherPages" href="#">Photography</a></li>
<li><a class="otherPages" href="#">Videography</a></li>
<li><a class="otherPages" href="#">Contact</a></li>
<button class = "bookNowNav">Book Now</button>
</ul>
</nav>
</div>
<div id="title">
<h1>Above <br>Photography</h1>
<h2 id="subTitle">Taking The<br>Perfect Picture</h2>
<button class="bookNow">Book Now</button>
<button class="learnMore">Learn More</button>
</div>
</div>
<div id="about">
<div id="aboutImage"></div>
<div id="aboutInfo">
<h2 class="">
About
</h2>
<p class="info">
My name is Max Herczeg and I'm a Grade 8 student from Toronto, Ontario. I have been flying drones for over 4 years and I've taken several photography courses as well. My passion for both of these interests has led me to create Above Photography. My age
allows me to provide clients with an affordable cost for a high-end final product. Above Photography has a creative and fun approach to each project. My company uses the high-end DJI Air 2S Drone. It shoots 5.4K video resolution and 20 mega pixel
pictures. This means that both photos and videos will look outstanding.
</p>
<button class="seeWork">Learn More</button>
</div>
</div>
Like mentioned by Ouroborus in the comments, there is no short answer here and there are several reasons:
You’re setting both the header (.center) and the #about divs to position: absolute.
Absolute positioning removes elements from the normal document flow and has several side effects.
Your header’s height is set to a percentage value & it has no relative positioned parent container with a set height.
So it gets its height from the <body>, which at the same time is your viewport’s height.
In other words, if your viewport changes height, so does your #header too.
You're setting a fixed margin-top: 860px to the #about section, but your #header dimensions are not fixed, like explained in point 2.
So putting it all together this means that whenever you make the viewport anything shorter than 860px, the margin on the about section remains at 860px BUT your header shrinks with the viewport. Thus why the shorter the height, the larger the gap in between. This is how It works.
Note: If you make your window taller, because the header is 94% height of the body, it will actually overlap the about section. *You can see this clearly by setting a background-color to the #header and making your window 1600px tall for example.
Also, when you do this, as is your #title will be centered vertically in the document... Potentially being out of place with your header's content and/or even overlapping with the about image (or any other content).
My suggestion is:
Move away from position absolute unless strictly necessary for complex inner layouts. You don't need the header container or the about to be absolute.
Before trying to do responsive layouts, make sure you understand how CSS box-model, display, and positionworks.. As well as flexbox and/or grid layouts (Even floats, if you want to learn like in the old days).
https://www.w3schools.com/css/ is a great place to start. Happy coding.
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.