How To Stretch The Div Element? I Want My Div To Be 100% Wide.

Trang chủ » Html Stretch Width » How To Stretch The Div Element? I Want My Div To Be 100% Wide.

Có thể bạn quan tâm

Skip to ContentProfile image of mladsamSubmitted by mladsamover 12 yearsHow to stretch the div element? I want my div to be 100% wide.

I successfully made the header and the footer 100% wide. So when I open my project in Mozilla Firefox, Google Chrome or Internet Explorer both (header and footer) are 100% wide. I wanted to do the same with another div (<div id="transitionline">) which is actually a thin red line above the footer but even though I tried many different combinations this one is never 100% wide? How to fix that? Any ideas?

Here is my html code:

<html> <head> <title></title> <link type="text/css" rel="stylesheet" href="2.css"/> </head> <body> <div id="header"> </div> <div id="maincontainer"> </div> <div id="transitionline"></div> <div id="footer"> </div> </body> </html>

And here is my CSS code:

body { background-image:url('bg-lighter.jpg'); background-attachment:fixed; } #header{ background-color: rgb(21,27,31); position: absolute; top: 0px; width:100%; height: 40px; left: 0px; padding: 5px; } #maincontainer{ background-color: rgba(5,4,2,0.5); /*This will make the main container black (rgb=5,4,2) and transparent (alpha is a=0.5)*/ width:1020px; height: 100%; margin-top: 40px; margin-left:auto; margin-right:auto; padding: 15px; } **#transitionline{ background-color: red; position: relative; display: block; width: 100%; height: 5px; }** #footer{ background-color: rgb(21,27,31); position: absolute; left: 0px; right: 0px; width:100%; height: 305px; } p {color: white;} h1 {color: white;}

Alex J edited this post to fix code formatting

Answer 516d79ce290a15e1bf00034c

1 vote

Permalink

Setting margin:0px; on body to override the browser’s default seems to do the trick.

Your browser’s default stylesheet has some margin value (mine had 8px) for body, so every child element of body whose position is not absolute or fixed needs to respect it.

Profile image of fanaugenSubmitted by fanaugenover 12 years

3 comments

Profile image of mladsamSubmitted by mladsamover 12 years

Excellent! It works perfectly now. I have to say that I would never figure this out without your help. I mean, who would have thought that the browser’s default stylesheet has some margin???

So, after adding margin=0px; my page will be fine in all browsers, right? Cool.

Thanks again for your hint!

Profile image of fanaugenSubmitted by fanaugenover 12 years

That browser default makes sense when you have a completely unstyled document: this way the content (text, images, whatever it is) doesn’t unpleasantly stick to the left margin. Most CSS frameworks (and most larger Web sites) have some CSS reset statements to undo all the browser defaults before defining their actual stylesheet.

Profile image of mladsamSubmitted by mladsamover 12 years

That sounds logical. Thanks for sharing your knowledge with me and others who are reading this.

Popular free courses

  • Free course

    Learn SQL

    In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.
    • Checker DenseBeginner Friendly.4 Lessons
  • Free course

    Learn JavaScript

    Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
    • Checker DenseBeginner Friendly.11 Lessons
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Checker DenseBeginner Friendly.6 Lessons
Explore full catalog

Từ khóa » Html Stretch Width