CODEWITHSUNDEEP
htmlparent
Daniel Schmitt
Daniel Schmitt

Reputation: 35

child div goes out of parent div

does anybody know why my child div class goes out of its parent div class? I don't know what's wrong with it!

Link to Fiddle and code attached!

Thanks for your help!

https://jsfiddle.net/cqynLsqu/

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
<div style="border: 1px #000 solid; width: 100%;">
	<div style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;">
		0
	</div>

	<div style="width: 100%; margin: 5px;">
		text text text text text text text text text text text text text text text text text text 
	</div>

	<div class="table" style="width: 100%; margin-right: 5px; margin-left: 5px; border: 1px #000 solid;">
		<div class="row">
			<div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;">
				0
			</div>		
			<div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;">
				0
			</div>
			<div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;">
				0
			</div>
			<div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;">
				0
			</div>
			<div class="cell" style="background-color: #012055; background-image: url(../images/tableTitle.png); height: 40px; line-height: 40px; color: #fff; font-size: 14px; font-weight: bold; padding-left: 10px;">
				0
			</div>
		</div>
		
		<div class="row">
			<div class="cell">
				0
			</div>
			<div class="cell">
				0
			</div>
			<div class="cell">
				0
			</div>
			<div class="cell">
				<b>0</b>
			</div>
			<div class="cell">
				<a href="0">0</a>
			</div>
		</div>
		
	</div>	

</div>

Upvotes: 0

Views: 229

Answers (1)

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

Change this line:

<div class="table" style="width: 100%; margin-right: 5px; margin-left: 5px; border: 1px #000 solid;">

to this:

<div class="table" style="width: 100%; margin-right: 5px; border: 1px #000 solid;">

The margin-left is pushing the content out.

Upvotes: 1

Related Questions