CODEWITHSUNDEEP
htmlcss
lucidbrot
lucidbrot

Reputation: 6156

Div does not fill parent with width:100%

html

<main>
    <div class="homediv">
        <p>test</p>
    </div>
</main

CSS

div.homediv {
  background-color: yellow;
  width: 100%;
  position: static;
  /*The lower the z-index, the further in the background the element*/
  z-index: -1;
}

At first glance, this should make the div horizontally fill the screen. But it did not. A few answers on here said that the width:100% will only work when the width of the parent is set, but that was set. To ensure that, I even gave html, body, main and my div the width:100% attribute. This did not fix it.

Upvotes: 5

Views: 9177

Answers (3)

Carnaru Valentin
Carnaru Valentin

Reputation: 1845

I think space is from <body> tag, not <main> so try 

body {
  margin: 0;
  padding: 0;
}

But if you use a reset CSS you don't have this problems. Read about importance of CSS reset. You can use this but also it's a lot good resets.

Upvotes: 1

Taqi Raza Khan
Taqi Raza Khan

Reputation: 684

Use this code, I hope it works for you:

body{
    padding:0;
    margin:0;
}

Upvotes: 0

lucidbrot
lucidbrot

Reputation: 6156

After some trying around in the chrome DevTools, I found out that main does fill the screen width. But it contained some seemingly pre-set attributes that I had to remove. Google told me that padding and margin are - if not specified - set by the browser, so to fix the css, I had to add

main {
  padding:0;
  margin:0;
}

Upvotes: 1

Related Questions