Solved

HTML Div whole page

Posted on 2010-11-23
3
398 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

809 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