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
Ivy W.
7,427 PointsMy Header color isn't filling all the way to the top of the page. What should I do?
I've been following along in the how to make a website course, and my header color (the medium green) isn't filling to the top of the web page as it should. I assume this is an issue I have with my main.css, but I can't figure out exactly where I went wrong.
Link to workspace snapshot: https://w.trhou.se/f790dfpfqa
Any help or tips would be appreciated, thanks!
Himanshu Chopra
3,055 PointsHello Ivy DeWitt. I recommend you using display: inline-block; instead of float:left for your header in your main.css that would fix your problem.
header {
display: inline-block;;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Well float is not advisable to use much in your website. I recommend you avoid using it in you code if possible. Why I am saying that? You can check this link out (http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell)
I hope this helps for you :)
Konrad Pilch
2,435 PointsI think in some places is ok to user inline-block if you know where. But thats nice, i usualy use table-cell, works every single time when i need it.
4 Answers
Himanshu Chopra
3,055 PointsHello Ivy DeWitt. I recommend you using display: inline-block; instead of float:left for your header in your main.css that would fix your problem.
header {
display: inline-block;;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Well float is not advisable to use much in your website. I recommend you avoid using it in you code if possible. Why I am saying that? You can check this link out (http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell)
I hope this helps for you :)
Konrad Pilch
2,435 PointsWhat i think it is, its about margins and or so . Try to set body to margin 0 and padding to 0. ALso, press f11 i believe, or inspect source, and press on the left down corner magnifing glass and then click on that margin and see if you can get it.
Hope this help, if not , well, im gonna check it in text editor .
Ivy W.
7,427 PointsNot sure if there's an easier way to do this via Treehouse, but here's a screenshot: http://prntscr.com/8l6k6p
Ivy W.
7,427 PointsHi Konrad & Himanshu,
I really appreciate your help! The display: inline-block worked perfectly. I'll have to rewatch the video and see if I missed that, and I'll check out the article you posted so that I can get a better understanding of the differences. Thanks!
Himanshu Chopra
3,055 PointsYou are Welcome Ivy DeWitt . Well I didn't see the video of the course you are doing but display:inline-block is my all time favorite so I use it over float whenever possible. Konrad Pilch yes bro you can use table-cell also but It can be used only if it is placed inside the elements which which has style table & table-cell.
No offence but I am display:inline-block fan :)
Konrad Pilch
2,435 PointsUsualy i style my footer with it and it works allways perfectly and other elements. I discovered if few days or weeks ago but it works for me.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsHow can i preview the website how it looks like on that w.trhou.se?