Solved

HTML Div whole page

Posted on 2010-11-23
3
399 Views
Last Modified: 2012-05-10
Hi,

I would like to have a div at the top which spans the whole page. What is the best way of doing this? I end up with margins. I have something that works IE8/ firefox but not IE7 .

#top{
      width:100%;
      height:50px;
      background-color:#900;
float: left;
      margin-top:-8px;
      margin-left:-8px;
      border-right:20px;
      border-right-color:#900;
      border-right-style:double;

}
0
Comment
Question by:wilflife
3 Comments
 
LVL 8

Accepted Solution

by:
Zado earned 200 total points
ID: 34201487
Try this:

#top {
  position:absolute;
  top:0;
  left:0;
  right:auto;
  width:100%;
  height:50px;
  background-color:#900;
  border-right:double 20px #900;
}
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 34201746
A <div> has a default width of 100% of what ever 'container' it is in.  You may have to add a CSS definition for the body to have "margin: 0;" to get rid of the default margins for the body.
body {margin: 0;}

Open in new window

0
 
LVL 9

Assisted Solution

by:darkapple
darkapple earned 200 total points
ID: 34202517
Try once this

*{
    padding:0;
    margin:0;
}

#top{
      width:100%;
      height:50px;
      background-color:#900;
      border-right:20px;
      border-right-color:#900;
      border-right-style:double;
      position:absolute;
}
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 33
Html CheckBox obtain Its Value 5 28
html input 8 43
I'm a Human captcha checkbox 13 23
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question