JZK JZK - 25 days ago 8
CSS Question

Parent div copy dimensions of child image

I need to set my parent div in the way, that it's child image will be inside of it, since parent div has visible border, which have to wrap around image and text. Thank you for any tips :)

My situation

HTML:



.about-us {
border: 1.5px solid $grey;
width: 100%;
height: 275px; //I need to get rid of this as now it's fixed
.us-image {
float: left;
width: 30%;
img {
width: 100%;
height: auto;
padding: .7%;
}
}
.about-us-text {
float: left;
width: 64%;
margin: 0 3%;
h3 {
margin-top: 5%!important;
text-transform: uppercase;
font-size: 130%;
font-weight: 500;
}
}
}

<section class="about-us">
<div class="us-image">
<img src="img/about-us.png" alt="about-us">
</div>
<div class="about-us-text">
<h3>Abc</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit
sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blandit lacus.
</p>
</div>
</section>
<!-- /about-us-->




Answer

Remove the height from .about-usdiv and clear the floats using clear:both with .about-us::after

html:

<section class="about-us">
        <div class="us-image">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/af/99/5d/af995d61b255bfd53bbdbfa343451949.jpg" alt="about-us">
        </div>
        <div class="about-us-text">
            <h3>Abc</h3>
            <p>Lorem ipsum dolor sit ame, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blanditd lacus. 
            </p>
        </div>
    </section><!-- /about-us-->

css:

 .about-us {
border: 1.5px solid black; 
width: 100%;
 //I need to get rid of this as now it's fixed

.us-image {
    float: left;
    width: 30%;
        img {
            width: 100%;
            height: auto;
            padding: .7%;
         }
 }

.about-us-text {
    float: left;
    width: 64%;
    margin: 0 3%;

    h3 {
        margin-top: 5%!important;
        text-transform: uppercase;
        font-size: 130%;
        font-weight: 500;
    }

}
}

.about-us::after{
  content: "";
  display:table;
  clear:both;
}
Comments