-1

How to make an HTML div element (with CSS) touch both the right and left ends with background-color?

I want to create a webpage with HTML5 element stretch to both the right and left ends of the webpage with some background color, I tried this:

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <div style="width:100%; height:120px;background-color:green;">
 </body>
</html>

It still stayed in the centre < I even tried to position it but that didn't work either.

How do I fix this?

Ayaan Ibrahim
  • 1
  • 1

4 Answers4

0

Is this what you are after?

Reset of padding and margin for all elements to the CSS with a view width on your div so it spans the entire width of the view port.

* {
  padding: 0;
  margin: 0;
}
  <div style="width:100vw; height:120px;background-color:green;">
dale landry
  • 7,831
  • 2
  • 16
  • 28
-1

I hope its useful to you.

 * {
  padding: 0;
  margin: 0;
}
#wrapper {
            background: red;
            overflow: auto;
            height: 100%;
        }


        #c1 {
            float: left;
            background: blue;
            width: 50%;
            height: 100vh;
        }


        #c2 {
            background: green;
            float: right;
            width: 50%;
            height: 100vh;
        }
<!DOCTYPE html>
<html>

<head>
    <title>Test</title>    
</head>

<body>
    <div id="wrapper">
        <div id="c1">left</div>
        <div id="c2">right</div>
    </div>
</body>

</html>
Himesha Patel
  • 143
  • 7
-1

Your code works with the ending div tag included. You can also use vw instead of %, see https://www.w3schools.com/cssref/css_units.asp. Note that 100vw will always be 100 percent of your browser width whereas 100% is relative to the parent element.

stackersunited
  • 9
  • 1
  • 3
-1

Add style="margin-left:0;margin-right:0;" in body tag.

Try like this:

<!DOCTYPE html>
<head>
    <title>Test</title>
</head>
<body style="margin-left:0;margin-right:0;">
    <div style="width:100%; height:120px;background-color:green;"></div>
</body>
</html>
Akhil Mohan
  • 1
  • 2