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
Thania Abrahams
972 PointsDiv 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!
3 Answers
Thania Abrahams
972 PointsHah! Thank you!!!! That makes perfect sense! I can move on with life now and apologies, am not every good at articulating myself :)
Russel Klueg
2,813 PointsNo worries at all! I'm happy to help! Could I ask you to upvote my answer?
Thania Abrahams
972 PointsI 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
2,813 PointsThat is very strange. No worries then! Thanks anyway!
Russel Klueg
2,813 Pointsit's because I never made my own post on this threat. I always replied. Oops :P
Thania Abrahams
972 PointsAh darn, and your really was the best answer that I have received this entire course :(
Thania Abrahams
972 PointsHi 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
2,813 Pointstry adding: img { max-width: 100%; }
This will tell the images that they should never be larger than their parent container.
Thania Abrahams
972 PointsThanks 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
2,813 PointsOh 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.
Russel Klueg
2,813 PointsRussel Klueg
2,813 PointsThe images "like playing cowboy" if you set their max-width: 100%; with css they will never be larger than the width of their container.