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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Div Containers and their elements

Hi there

In this video, we set a max width for the div container ie. 940 px, inside of which we have both images and text. The images contained inside of this container, are quite big and therefore stick out of the container. Are the elements inside of a container meant to heed to the specified container size? Or is it just images that like playing cowboy? Am beginning to wonder if "container" is the correct term, if none of the elements inside of it actually conform the to the specified container limits.

Do let me know if you need me to paste my code. Thanks so much!

Russel Klueg
Russel Klueg
2,813 Points

The images "like playing cowboy" if you set their max-width: 100%; with css they will never be larger than the width of their container.

3 Answers

Hah! Thank you!!!! That makes perfect sense! I can move on with life now and apologies, am not every good at articulating myself :)

Russel Klueg
Russel Klueg
2,813 Points

No worries at all! I'm happy to help! Could I ask you to upvote my answer?

I have been trying to upvote your answers and I ended up doing it for my own answers that are mean to be comments :( It isnt giving me the option to upvote any of your answers, I can only click on your name. What should I do?

Russel Klueg
Russel Klueg
2,813 Points

That is very strange. No worries then! Thanks anyway!

Russel Klueg
Russel Klueg
2,813 Points

it's because I never made my own post on this threat. I always replied. Oops :P

Ah darn, and your really was the best answer that I have received this entire course :(

Hi Russel

Thank you, I have not specified a max-width for my images, only the div container. Please see my code below:

a { text-decoration: none; }

wrapper {

max-width: 940px;
margin: 0 auto;
background-color: orange;

}

You said that with css they will never be larger than the width of their container but my images are definitely breaking the container max-width. What am I missing?

Russel Klueg
Russel Klueg
2,813 Points

try adding: img { max-width: 100%; }

This will tell the images that they should never be larger than their parent container.

Thanks Russel, tried this earlier and it works perfectly! So I guess than, unless I specify styling specific to the elements inside of my container, they will/can break outside of the constraints I specify for my container itself?

I am not trying to fix or change anything, I am just trying to understand the idea behind containers and how they work in terms of the elements inside of them :)

Russel Klueg
Russel Klueg
2,813 Points

Oh ok! So, to my knowledge, text and stuff will be bound by the constraints of the div containter. IE if you specify it is only 500px wide then text lines will have to wrap but images that are larger than your container will break out unless you style them not to. I don't know WHY this happens though. I would say it has something to do with the way your browser interprets everything. Since HTML was made to share Scientific papers and whatnot I would assume that the basic styling applied by browsers does not account for images.