Was trying to implement border-clip to one of my divs so that the border gets clipped so it doesnt stretch all the way across. Its on the mainwrapper div. Its the border right above “Find what you need quick and easy:” here is the link.
That’s CSS4 and I don’t believe any browser supports border-clip even with vendor extensions. That draft you pointed to is not maintained so I doubt its going to turn into anything soon.
You will need to find another method if you only want partial borders. You could probably do it with generated content :before or :after and absolutely placing a border around the relative parent but it all depends on the exact requirements.
Another question is, I’ve put some more content in but now when you scroll down the header/sidebar when you scroll below it is white. How can I keep the black and red bars going all the way down?
One way to get full height sections is to use the display table and display table-cell properties. I would use the body background as the black left border then create an offset table width 3 rows and 2 cells in each row for the rest of the layout. This will ensure that cells stretch together.
The default for table-cells is vertical-align:middle and as you have set the logo to be 200px tall it moves it down to align it to the middle. You could set vertical-align:top to the display:table-cell elements to kill the gap but that’s not probably what you want.
If you wanted the Miller text logo to vertically center with the “'M” of the left you didn’t really need to do anything special if you had created a table-row (display:table-row) wrap with just 2 display:table-cells and make sure that vertical-align:middle is set for the table-cell and then both the contents in those cells will align vertically and there won;t be a need to force the height or do any calculations.
The grey part should line up with the darker red part.
Again these two elements should be related cells within a table row and they will both match height and both expand together to keep that effect nicely.
For the last section with the nav and the content you again want a display table-row with just two cells but this time with content vertically aligned to the top. You probably won’t need any more cells after that as the content can just be stacked n those 2 last cells just like two columns.
Note: Don 't use those classnames as I just used them to make it obvious what was what in the demo but you can include the properies in sidebar and main without the extra table-x classes. Don;t use breaks like that either as that’s just for the demo. The content should be in a semantic container with its own margins.
Are we talking about the ‘M’ logo on the left and the Miller text image next to it at the top?
If so they are both images and you have set those images to scale and they will get smaller as the window is closed which in turn means the row gets smaller because there is no other content to hold the cell open. You could set a min -width for those images to stop them getting smaller and a height for that top row.
For your black strip down the side of the page I would have done that just using the body background colour and offsetting the table by the 8% (and reducing its width by 8%) that you have used for that strip you didn’t need an extra cell to do it as such. The table could have been set to height:100% initially (html and body would need 100% height also) to fill the whole screen so that you always have the red and black strip full height. However, it will work like you have it now so may not be worth the effort.