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 Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Remove an element from the forced width that the parent container is applying to the element

How do I remove an element from the forced width that the parent container is applying to the element?

<div id="container"> <!-- This div is forcing the site to be 960px width. Also It holds all the content that the site has -->
  <div id="extra"> <!-- I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border  -->
    <src img="orange.jpg">
  </div>
</div>

I can't edit the css of the original site. That is why I can't modify the code which holds the .container in its proportions. I can only add css to the site.

I've been trying to use different position commands but they didn't seem to bring the desired solution. I couldn't get the image span from left to right.

Which solutions I could use to solve this problem. I can only use css. I'm working with WordPress and PageBuilder by SiteOrigin plugin.

2 Answers

Himanshu Chopra
Himanshu Chopra
3,055 Points

Hello Konshtantin! You will have to make your .container 100% to #extra to take full width of browser. If your .container is 960px and your #extra is inside that element then you can't force this element to take full browser width. what you can do is you can override the .container css properties by writing your own properties in your custom stylesheet. In that case you can set .container width to 100% in your custom stylesheet.

I hope that makes sense. If you have any doubt please do write.

Thanks :)

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

I asked this same question in Stackoverflow and got a really nice answer: http://stackoverflow.com/questions/33364213/remove-an-element-from-the-forced-width-that-the-parent-container-is-applying-to/33366467#33366467

Himanshu Chopra
Himanshu Chopra
3,055 Points
Himanshu Chopra
Himanshu Chopra
3,055 Points

Ohh that's great. Setting it to absolute, left & right 0. Thanks for sharing it here even I learned something. I don't deserve best anwer for this question here.