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
Sebastian Graus
633 PointsSidebar not taking up 100% of height
Hey there,
I've been trying to build a wordpress site from scratch with help from the responsive-web-design videotutorial here on teemtreehouse. I want to have a vertical "header", so a sidebar that contains the nav-bar and so on. Yet I'm not successful in achieving the "header" to get 100% of the height of the site. I've put the container to 100% height and also the grid-3 class, which both hold the "header"
Here's the css for the "header" or "sidebar".
#header {
width: 23.5%; /*235px*/
max-width: 235px;
height: 100%;
background-color: #f7d846;
padding-top:80px;
padding-left:0px;
float: left;
}
Here's also a link to the page, http://marielaveau.se/wordpress/testar/ . As you se the yellow header stops after a few 100% and the content (#contentwrapper) with the text just continuos below. I want the #header to take up 23.5% of the width but 100% in height of the whole browser window. Then I want the #contentwrapper to take up 70% of the width, to the RIGHT of the "header"/"sidebar".
It works to put the #header div to position:fixed; The problem is that this results in that the contentwrapper appears underneath the #header, aligned to the very left of the page.
Could it have anything to do with the way of wordpress pages? Do I have to include the sidebar in every single page for it to work? Is the header.php in wordpress not including 100% of the browser-window?
Help anyone?
3 Answers
Nick Pettit
Treehouse TeacherHi Sebastian Graus,
Someone might correct me, but this project might be a little bit beyond the scope of what a grid framework can provide. In essence, your elements are getting constrained by the grid classes. For example, you could float two elements left, set them to 20% and 80% widths, and be done with it. However, the elements you're setting the widths on are inside the grid classes. Does that make sense? :)
Sebastian Graus
633 PointsThanks for your answer Nick Pettit, so what you are saying is that I should not work with a grid framework and my problem should be fixed? What about the "responsivness" of the site? Will it still work as long I use percentages on every div and so on?
I'm still a bit confused why the grit is not working for me. I mean, grit3 is exactly the same width (235px) as my header div that is also 235px.
Nick Pettit
Treehouse TeacherActually, I looked at your code some more and noticed a number of problems.
First, your page doesn't have a Doctype declaration. This is fairly important to add (at the top) because it will inform the browser how your page should be rendered. Just add the following line as the very first line in your file with no space before it and a return after it.
<!doctype>
Next, I noticed that your normalize.css and grid.css files aren't even being included, so the grid classes that you're using are not being applied. The address http://marielaveau.se/wordpress/testar/css/grid.css goes to nowhere.
Once you've fixed those problems, your grid might start working as expected. :) If not, just reply here and we can keep figuring it out together.
Sebastian Graus
633 PointsNick Pettit awesome help.
I've added a doctype and I've also specified the css-linking, now it should be linked correctly. Yet I see almost no changes in the website.
I will try working on it myself as soon as I wake up tomorrow, it's bedtime in Sweden. Thanks again.
Nick Pettit
Treehouse TeacherGlad I could help! Now that your grid CSS is in place, things should start to make a little more sense. :)
Sebastian Graus
633 PointsOkey, now it actually works, even with the grid. Here's the css for #header and #contentwrapper:
header {
width: 100%; /*235px*/
max-width: 235px;
height: 100%;
background-color: #f7d846;
padding-top:80px;
padding-left:0px;
float: left;
position: fixed;
}
contentwrapper {
width: 70%; /*700px*/
float: right;
position: relative;
}
But do you think it's still useful to use the grid?
Sebastian Graus
633 PointsWhile we're at it Nick Pettit, as you seem to know A LOT, I'm wondering if you think the grit that you are using in the responsive web-tutorial suits my project.
This is what my front-page will look like: http://www.marielaveau.se/wordpress/snabbskiss.png
A three-column based layout with the first column (header) at 235px, the second column at 390px and the third and last column at 303px. Some widths of the grid are perfect like grid3 that is 235px (as my first column) and grid4 (320px) that would work for the third column. For the second column however there is no grid that is close, I hav etho choose between grid4 (320px) or grid5 (405px). The problem is, as my contentwrapper is 700px to use grid4 for the third column and grid5 for the second column, it would get to big (725px).
Can i change the sizes of the grid or can you recommend me to use any other gridbased framework?
Thanks again.
Nick Pettit
Treehouse TeacherHi Sebastian,
You generally do not want to change the size of the grid. It's bad for technical reasons (it produced unpredictable results) and it may not result in the most professional looking design. Sticking to the grid is almost always a good idea.
That said, if you have elements that don't fit a grid size, the best thing to do is to put those elements inside of the next largest grid size that will accommodate them, then resize the elements themselves (not the grid). Does that make sense? :)
Sebastian Graus
633 PointsSo basically, I should just change the widths of my elements to work within the widths of the grid?
Nick Pettit
Treehouse TeacherThat is correct, yes. :)
Sebastian Graus
633 PointsHey again Nick Pettit,
with this code
.contenwrapper
width: 70%; /*700px*/
float: right;
position: relative;
it works. But then I get some trouble with the grid. As I but my grids inside of the contentwrapper class, they all get to small because of the widths of the grid. For example, the width of grid_6 is 49% is 490px/1000px (1000px is the original width of the container). Now, when the context container is 700px, the grid_6 is only 342px, not 490 as the original.
The problem is that I need the content wrapper for the left sidebar to align correctly. Should I just recalculate the grids in this way: grid-width / 700px = target or should I just work with the grids being smaller?
Nick Pettit
Treehouse TeacherYou shouldn't have to code any kind of wrapper. That should be built into the grid system and there should be a class somewhere that you can use that will do the same thing.