CODEWITHSUNDEEP
htmlcss
billybobjones
billybobjones

Reputation: 513

How do I make a div's width 100% to the parent div?

In the following piece of code, the pink div is overflowing. How do I make the width 100% inside the parent div?

Here's a JS fiddle - https://jsfiddle.net/8q8n6bt5/

#mobilefooter {
    width: 100%;
    height: 70px;
    background: #06C;
    position: absolute;
    display: inline;
    z-index: 99;
    bottom: 0;
    box-sizing: border-box;
}
.foxmobile {
    width: 42px;
    height: 60px;
    background:#2CDB46;
    margin-top: 5px;
    display: inline;
    float: left;
}

.footercontext {
    width: 100%;
    height: 60px;
    background: #F36;
    color: #FFF;
    margin-left: 45px;
    margin-top: 5px;
    display: block;


}
.footercontext p {
    width: 100%;
    font-size: 10px;
    line-height: 12px;
}

Upvotes: 0

Views: 56

Answers (3)

divy3993
divy3993

Reputation: 5810

The reason behind is margin-left: 45px; of .footercontext. Just add this code line: width: calc(100% - 45px); so it will make your .footercontext 100% by deducting 45px of margin.

JSFiddle

.footercontext {
    width: calc(100% - 45px); /* CHANGED */
    height: 60px;
    background: #F36;
    color: #FFF;
    margin-left: 45px;
    margin-top: 5px;
    display: block;
    }


body{ margin:0px;}
#mobilefooter {
	width: 100%;
	height: 70px;
	background: #06C;
	position: absolute;
	display: inline;
	z-index: 99;
	bottom: 0;
	box-sizing: border-box;
}
.foxmobile {
	width: 42px;
	height: 60px;
	background:#2CDB46;
	margin-top: 5px;
	display: inline;
	float: left;
}

.footercontext {
	width: calc(100% - 45px);
	height: 60px;
	background: #F36;
	color: #FFF;
	margin-left: 45px;
	margin-top: 5px;
	display: block;
	
	
}
.footercontext p {
	width: 100%;
	font-size: 10px;
	line-height: 12px;
}
<div id="mobilefooter">
	<div class="foxmobile"></div>
    <div class="footercontext">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

Note : Also added body{margin:0px;} to ignore body margin's.

Upvotes: 1

CodeRomeos
CodeRomeos

Reputation: 2448

You should remove width:100% from .footercontext. It will automatically expand to fit the parent.

#mobilefooter {
  width: 100%;
  height: 70px;
  background: #06C;
  position: absolute;
  z-index: 99;
  bottom: 0;
  box-sizing: border-box;
}
.foxmobile {
  width: 42px;
  height: 60px;
  background: #2CDB46;
  margin-top: 5px;
  display: inline;
  float: left;
}
.footercontext {
  height: 60px;
  background: #F36;
  color: #FFF;
  margin-left: 45px;
  margin-top: 5px;
  display: block;
}
.footercontext p {
  font-size: 10px;
  line-height: 12px;
}
<div id="mobilefooter">
  <div class="foxmobile"></div>
  <div class="footercontext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Use width: auto on the .footercontext element.

Demo

html,
body {
  margin: 0;
  padding: 0;
}
#mobilefooter {
  width: 100%;
  height: 70px;
  background: #06C;
  position: absolute;
  display: inline;
  z-index: 99;
  bottom: 0;
  box-sizing: border-box;
}
.foxmobile {
  width: 42px;
  height: 60px;
  background: #2CDB46;
  margin-top: 5px;
  display: inline;
  float: left;
}
.footercontext {
  width: auto;
  height: 60px;
  background: #F36;
  color: #FFF;
  margin-left: 45px;
  margin-top: 5px;
  display: block;
}
.footercontext p {
  width: 100%;
  font-size: 10px;
  line-height: 12px;
}
<div id="mobilefooter">
  <div class="foxmobile"></div>
  <div class="footercontext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Upvotes: 1

Related Questions