Silhouette Silhouette - 8 days ago 5
CSS Question

Child element extending outside parent div when going into mobile view

I'm absolutely stumped on what's happening here. I tried every fix I could find on this site and nothing seemed to help.

I'm trying to make my site view better when using mobile. With my parent div it changes from px width to % width when the screen is smaller than the preset width, as well as the child elements changing from floated px width elements to 100% block elements when going into mobile view.

However, no matter what I try, when the child elements switch to 100% they take on 100% of the browser rather than the parent... Which makes them spill out the right side of the parent element.

I'm absolutely stumped on what to do.



.wrapper {
width: 1100px;
margin: 0 auto;
}
.main-table {
width: 100%;
background-color: #FFF;
border: 1px solid #d1d1d1;
margin-top: 3em;
color: #4a4949;
font-family: Arial, sans-serif;
font-size: 0.7em;
}
.main-table h2 {
background-color: #080709;
font-family: 'Josefin Sans', sans-serif;
font-size: 1em;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.3em;
line-height: 4em;
margin: 2.5em;
text-align: center;
}
.main-table .table-content {
float: left;
margin: 0 2.5em 2.5em;
text-align: justify;
line-height: 1.3em;
}
.clearfix:before, .clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
@media only screen and (max-width: 1100px) {
.wrapper {
width: 100%;
}
.main-table .table-content {
float: none !important;
width: 100% !important;
margin: 0 2.5em 2.5em !important;
}
}

<div class="wrapper">
<div class="main-table clearfix">
<h2>Main Title</h2>
<div class="table-content" style="width: 636px">
Nunc vitae purus vel dolor lacinia gravida. Vestibulum euismod dictum nulla. Suspendisse suscipit quis est ac tristique. Aenean sodales porta diam ac venenatis. Suspendisse tincidunt at ex ac vestibulum. Donec lacus turpis, condimentum suscipit tempor ut, pulvinar non velit. Vestibulum varius lacus tortor, non aliquam dolor lobortis a. Fusce bibendum, tortor ac faucibus finibus, leo leo consequat sapien, non consectetur sem nisl quis est. Duis non nunc luctus, auctor dui sed, commodo lacus. Curabitur efficitur convallis facilisis. Pellentesque tincidunt magna vel nisl volutpat consectetur. Aenean condimentum, libero in lacinia venenatis, mi purus varius turpis, quis placerat nisl nibh ac odio. Nulla ac augue elit. Integer mi ante, ultrices id finibus ut, volutpat vitae tellus.
</div><div class="table-content" style="width: 380px; margin-left: 0">
Donec blandit, massa vel venenatis dapibus, metus nulla lacinia ligula, a accumsan metus lectus eu dolor. Ut rutrum in purus ac hendrerit. Aenean luctus urna sit amet erat pharetra, dictum tristique dolor rutrum. Fusce in porta sem. Proin augue quam, faucibus varius nisi in, aliquam scelerisque nibh. Donec blandit tortor et varius efficitur. Nam nec ipsum eget orci congue posuere at quis lectus. Sed vehicula leo eros, ut consequat enim pretium id. Aenean scelerisque at diam a fermentum. Phasellus facilisis sagittis rutrum. Donec malesuada mauris in tellus congue euismod.
</div>
</div>





https://jsfiddle.net/eame16p2/

Answer

Replace margin with padding, margins caused problems, so width was over 100%, because you have set width of child to 100% and added margins... and add box-sizing:border-box:

.main-table .table-content {
    float: none !important;
    width: 100% !important;
    padding: 0 2.5em 2.5em !important;
margin:0;
box-sizing:border-box;

}

Demo: https://jsfiddle.net/eame16p2/1/

Comments