CODEWITHSUNDEEP
css
YSuraj
YSuraj

Reputation: 417

full width inside a div element?

100% width div element inside a parent div within a list seems to not work.

.parent { 
   position : relative;
   width  : 200px;
   height : 200px;
   background-color : #888888;
}

.child {
   width : 100%;
   height : 40px;
   background-color : #555555;
   margin : 1px 0 0 0;
}
li {
 list-style-type : none;
}
<div class="parent">
   <ul>
      <li><div class="child"></div></li>
      <li><div class="child"></div></li>
   </ul>
</div>

Upvotes: 2

Views: 4299

Answers (4)

Omprakash Arumugam
Omprakash Arumugam

Reputation: 1042

Set padding-left to 0 for ul. Browser maker add some default styling to some elements like underline to "a" tag. You can use CSS reset to remove those styling. For more info read this article.

.parent { 
   position : relative;
   width  : 200px;
   height : 200px;
   background-color : #888888;
}

.parent ul { padding-left: 0; }

.child {
   width : 100%;
   height : 40px;
   background-color : #555555;
   margin : 1px 0 0 0;
}
li {
 list-style-type : none;
}
<div class="parent">
   <ul>
      <li><div class="child"></div></li>
      <li><div class="child"></div></li>
   </ul>
</div>

Upvotes: 1

JohnH
JohnH

Reputation: 2133

Use a browser's "Inspect" feature to see what is causing the li elements to have a width less than expected. After doing so, the ul element appears to consume a width of 81px. This causes the li element to be narrower than expected.

enter image description here

Reformat the html or make CSS changes to correct this.

Upvotes: -1

Fab
Fab

Reputation: 4657

You have to remove default padding from ul element:

ul {
padding: 0;
}

Upvotes: 2

Stefano Zanini
Stefano Zanini

Reputation: 5926

That's probably because by default <li> has display: inline.

You can try to change it to display: inline-block or display: block, depending on your needs.

Upvotes: 2

Related Questions