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
Sven Huff
Courses Plus Student 4,355 PointsWhat's wrong with my page?
I've just completed the first section of the web developers path and builded my own page. (Not complete yet)
If you visit http://www.sven-huff.de/about.html
You'll see, that copy and pictures are very seperated. I want them to be closer but at a certain browser width, they are very separated. I set margin and padding to zero - but it does not work. Do you have any ideas of how to get them closer. They should behave also responsive. And I think it is yet not very neat, if you'll see, when you narrow the browser window.
Thanks again for help!
Best,
Sven
6 Answers
ilithya
19,818 PointsHi Sven Huff,
Well first of all, I wouldn't recommend at all inlining your styles. Like never! ;) And here is a why: http://webdesign.about.com/od/css/a/aa073106.htm
The reason why your image and copy start to separe a lot at a certain browser width is because you haven't given a max-width to your parent container.
For example, I would have given a max-width to the body, so that at certain browser width, it stops from growing and the layout design doesn't look weird, being to wide:
body {
max-width: 80em; /* This is about 1280px */
margin: 0 auto; /* This will center the body */
}
Then I would only float the image to the left and give it a margin-right, depending on how close would you like the copy and image to be. And I'll remove the top margin, and instead adding it to the your div "about" with a class name.
I'd also remove the "float: right;" and "width: 50%" css from your copy "p", as you won't need this anymore.
And finally, I'd have created 2 breakpoints with media queries, in order for the image to stop floating, once the copy width gets too small:
.about {
margin-top: 2%;
overflow: hidden; /* This will keep your floated image inside the container */
}
@media only screen and (min-width: 971px) { /* If browser's width is 971px or bigger */
img {
float: left;
margin: 0 5% 0 10%;
}
}
@media only screen and (max-width: 970px) { /* If browser's width is 970px or smaller */
img {
display: block;
}
}
Hope that helps. Happy coding!
Arquay Harris
7,419 PointsHello Sven,
The reason your layout is behaving this way is b/c "#about img" is set to "float:left" and "#about p" is set to "width: 50%; float:right".
So when the screen is larger, the p only takes up 50% leaving a lot of extra room for the image.
The ideal fix would be to create a wrapper and separate columns for the image and the paragraph. BUT a quick fix would be to do this:
#about p {
width: 50%;
background: white;
font-family: 'Oswald', sans-serif;
color: #999;
font-size: 1.15em;
float: left; // floated left, just like the image
margin: 0 10% 0 2%; // added a left margin
}
Sven Huff
Courses Plus Student 4,355 PointsHi Arquay, many thanks for your support. I've tried your suggestion. It makes the paragraph and the img fix together but also it puts the img on the left side.
jobbol
Full Stack JavaScript Techdegree Student 19,117 PointsHey Sven.
You're making good progress, but you're using things outside of your current scope. If you go just a little further down the CSS Basics course you'll find much more helpful techniques you can use. I'd highly recommend that you finish this course.
The Layout
Now for your page, focus on this small part. Your image and paragraph are both inside a section. This section represents 100% of the space. Your image is floated left and your paragraph is floated right. The problem is these elements do not add up to the 100% of space. Because they are smaller, you have a gap between them.
How to Fix
You'll need to do some math. We want the paragraph to occupy the majority of the space, so we will make this 60%. Width is 50% and you have a margin-right at 10%. Good.
Your image needs to occupy the remaining 40%, and this is where the gap appears in your CSS. The image is 242 by 353 px with no properties on the width value and a 10% left margin. This needs to be changed. Set the width to 38% and give it margins 1% on all sides.
Because the 1px border around the image gets added on top of the 40% width this forces the paragraph to wrap. You will need to set box-sizing to border-box to fix it.
Code
Add these in, remove the original margin value:
#about img{
margin: 1%;
width: 38%;
box-sizing: border-box;
}
Sven Huff
Courses Plus Student 4,355 PointsHi Josh, many thanks for your in depth explanations. Especially the remainder concerning the width was helpfull. But if I adapt your code, the img sticks to left side of the window. The box-sizing property was new for me. I think I need to tinker around with the code a bit – the direction is much clearer now. Thank you!
jobbol
Full Stack JavaScript Techdegree Student 19,117 PointsIf you want gutters on the sides of your page, add your margins on the section tag instead of on the child elements. This will leave all those widths intact.
It's also good coding practice. Putting your margins on every child element is tedious, consider if you needed to add several more paragraphs in the future? That's a ton of extra code.
Sean T. Unwin
28,690 PointsHere's a few quick changes, without changing your overall approach, which looks alright at different widths. Although, there is likely some fine-tuning that could be done with media queries.
#about p {
/* float: right;*/ /* remove this */
/* width: 50%; */
width: 80%;
/* margin-right: 10%; */
margin: 3% auto 0;
}
#about img {
/* margin: 2% 0px 0px 10%; */
margin: 1% 3% 0 12%;
}
Sven Huff
Courses Plus Student 4,355 PointsHi Sean, many thanks for your help. I tried your code. But it put's the paragraph under the img. Best, Sven
Sven Huff
Courses Plus Student 4,355 PointsHi ilithya, thanks a lot for your help. The hint with the max-width was especially helpfull. I've now got a better understanding, of how the elements will behave. I need to tinker around a bit, so that the page will do, what I want. :)
Best, Sven
ilithya
19,818 PointsHi Sven Huff,
Glad to hear I could help :)
As more CSS you study here in the Treehouse, you'll get more explanations and examples on how to use "max-width" and also "min-width" on HTML elements.
Every time you think there's an element in your layout that shouldn't expand more than..., or shouldn't compress more than..., those 2 properties are a big help.
And you could apply 1, 2, or all of the 3 properties to one or more elements:
.container-with-1-property {
width: 90%;
}
.container-with-2-properties {
width: 90%;
max-width: 80em; /* Browser width max value: 1280px */
}
.container-with-3-properties {
min-width: 20em; /* Browser width min value: 320px */
width: 90%;
max-width: 80em; /* Browser width max value: 1280px */
}
If you haven't taken it yet, I'd recommend you this Treehouse course below. It also helped me: http://teamtreehouse.com/library/css-foundations
There you'll learn about the "Box Model", and specially in the video attached here, Guil explains "max-width" and "min-width": https://teamtreehouse.com/library/css-foundations/the-box-model/width-height-and-overflow-properties-2
Good luck!
Sven Huff
Courses Plus Student 4,355 PointsHi ilithya, thanks for the ressources link. Yes, actually I am in the "CCS Foundation" Class and work my way through. Cheers, Sven
Ira Bradley
12,976 PointsIra Bradley
12,976 PointsI believe putting your photo and text block inline should resolve the problem. Try moving the img inside the paragraph tag. It would also be helpful if you could post the HTML and CSS here so I could look at it more closely.
Doing something like...
<img src="img/me.png" alt""="" style="margin-left: 350px;">will move the photo closer to the text but I doubt that is the best approach.