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 Responsive Layout

William van Voorbergen
William van Voorbergen
7,852 Points
Posted by William van Voorbergen
William van Voorbergen
7,852 Points

Position the div on the whole width

Hi all,

I'm making my responsive lay-out and come across a problem. See my project: https://github.com/wvv1989/responsive

Problem is: when my portfolio area starts it flows over from grey to white. Only the white area is not fully covered (see left and right edge, it's still grey).

Can someone tell me how to fix this?

Kind regards,

William

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi William.

I'm not sure what exactly it is you're asking for but I think you want a grey edge on the right hand side of the screen just as there is on the left.

You can get this by applying a smaller percentage width to your first wrapper div. Like this

.wrapper {
    width: 98%;
    background-color: #f2f2f2;
}

Let me know if this helps :)

William van Voorbergen
William van Voorbergen
7,852 Points
William van Voorbergen
William van Voorbergen
7,852 Points

Thank you for your reply. No this is not what I ask.

See this screenshot: http://williamvv.com/1.jpg

You see left and right the body background (grey). I want to the white background fill the whole width.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi William,

Without seeing the code in action I cant really advise exactly but I can hazard a guess at the fact you are not using normalize.css which would have removed default padding and margin on the body tag.

As I say this may not be right as I cant see it in action and use Chrome inspector but it may be worth looking into yourself.

Craig

William van Voorbergen
William van Voorbergen
7,852 Points
William van Voorbergen
William van Voorbergen
7,852 Points

Thank you for your reply. I'm stuck with another problem. I'm doing a responsive design (mobile first) and use float for this. At screen 1024px and 768px everything is fine but when I resize them some images and text are positioning another way.

This is my website: http://www.williamvv.com/responsive

What type of positioning works the best?

Craig Watson
Craig Watson
27,930 Points

In any instance of responsive design I personally base it on the content. I have no set way that I use every time. But I do have a couple of mental rules I go by to decide what I am doing.

  1. Grid System - Currently this is my go to for structural layout. I use the Bootstrap Grid System, on this page you can toggle off everything but the grid and leave yourself a very robust layout tool.
  2. Flexbox - I watched a webinar once about using flexbox on a modular basis. So the grid handles the main structure but flexbox can handle rows of content down to a group of buttons. I cannot find the exact webinar which is a shame because this method really works well.
  3. Floats - Truthfully I hate them, I have never gotten my head around them. I use them for floating images to either side of a blog post and that is about it.

Hope this guides you a little to making your own mental rules.

Craig :)