Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by ajor
ajor
8,216 Points

Why does DIV not expand to accommodate image?

Hello fellow Treehouse students,

I created a simple landing page to improve my CSS skills. In this landing page, I'd like to nest some text and an image inside a DIV. However, the size of the DIV seems to adjust only to the text and not to the image. In other words the image sticks out of the DIV.

I appreciate any help and pointers.

Here's the code I came up with:

HTML

<div class="guide"> 
            <img src="img/guide_01.jpg">
            <p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
</div>

CSS

.guide {
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    padding: 5px;
    background-color: chocolate;
    width: 80%;  
    height: auto;
}


.guide img{
    float: right;
    width: 15%;
    height: 15%;


}

.guide p {
    color: black;
    padding: 10px 10px 10px 10px;
    margin: 20px 10px 20px 10px;
    width: 70%;
}

What am I doing wrong?

Thank you for taking the time to read my question. A.J.

Marc Cortez
Marc Cortez
2,977 Points

I think you should give the img tag a max-width of 100% and set the height attribute to auto.

It should look like this:

.guide img { max-width: 100%; height: auto; }

Let me know if you got any further questions!

Greetings from Vienna, Marc

1 Answer

ajor
ajor
8,216 Points
ajor
ajor
8,216 Points

Thank you so much for your help, Marc!

Setting the width of the image to 100% did lead to a result where the DIV expands enough to fit the image. However, the images also fills out the DIV entirely.

I am looking to find a way to have the picture placed on the right side of the DIV while text floats on the right side of the picture.