Becky Becky - 4 years ago 99
HTML Question

Content going out of container when padding has been added

I am having an issue with content going outside of a container. It is happening in the service_description area of my code. I have padding set vertically and horizontally for the description. The vertical padding is taking place just not the horizontal.

To make the description come out just click in one of the boxes and then you will see what I am referring to. I want all of the content to remain in that box.

Why is this doing this when I have padding set?



$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});

.page_wrap {
margin: 15px 10%
}
.left_service_wrap {
float: left;
width: 40%;
margin-left: 5%;
}
.service_wrapper {
margin-left: 25%;
border: 1px solid black;
margin: 15px 0;
width: 80%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
padding-right: 6px;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
<div class="left_service_wrap">
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Flooring</div>
<div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofing</div>
<div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
</div>




Answer Source

You can add word-wrap to your .service_description class which should break the words onto a new line when it reaches the end of the container.

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%; /* Probably should remove this as well */
  margin-top: 10px;
  font-size: .9em;
  word-wrap: break-word;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download