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 Dennis Castillo
Dennis Castillo
16,018 Points

Responsive but it is not responsing :D

Greetings,

I'm having a problem and this is making me nuts every time I deal with this.

I created a class for instance

<div class="mainBoby"></div>

inside of this "mainBody" has 2 box, left and right position(float).

<div class="mainBoby">
     <div class="leftBox"></div>
     <div class="rightBox"></div>
</div>

The value width of the "mainBody" has AUTO, height is 100% or auto and padding is 2%, the "mainBody should respond according to the size of "leftBox" and "rightBox". The rigthBox and leftBox has same value in width and height: width = 45%, height = 45%.

My problem is the "mainBody" won't respond according to the size of leftBox and rightBox, it's seem the leftBox and rightBox is not part of the mainBody class. And if I use fixed value in pixel(px) there will be a problem in mobile. Is there any solution for this kind of problem? or Am I missing something?

Thanks and I appreciate...

1 Answer

Joe Dayvie
Joe Dayvie
11,956 Points

Dennis,

Sorry but just trying to understand the question. Are you trying to have these two boxes best next to one another but it is not working? There are a few solutions to that but just want to make sure I understand.

Note: You seem to have "mainBody" misspelled too.

  1. You could use the float method by assigning a float: left; and float: right; and then set the mainBody class to overflow: auto; to remove the float. This is what I prefer and use - You would not have to change much in your existing code.

  2. You can assign the boxes a display: inline-block; with a few other properties, in addition to the mainBody class.

Hope this helps!

Joe

Dennis Castillo
Dennis Castillo
16,018 Points

AH HUH! it works :D so... I just add "overflow: auto" to the mainBody and "display: inline-block to the boxes. Now it is responding. Thank You very much I appreciate your help <thumb-up> and sorry about my English ;)