background cuts short of text

[bikejunkie]

http://codepen.io/anon/pen/XJedqg

Hello folks;
If you have any advice I appreciate it.
I’ve been working on a long scrolling site and the background cuts short about halfway through. The whole is enclosed in a container div.
<mystified>

[shaneisme]

.textblock shouldn’t have float: left, or you should clear them properly… but I don’t see why they need a float to begin with. An element that is floated is taken out of the flow of its parent and won’t take up space within it.

[shaneisme]

Question though – for this bit:

* {
  margin: 0;
  padding: 0;
  width: 100;
}

Do you know what that does?

[bikejunkie]

thanks so much Shane. That solved a big puzzle.
the margin:0/padding:0 is a reset.
If we want to control the look fully (lets say keep the navbar all the way at the top, then the reset allows full control. Otherwise the browser uses it’s own default margins.
Some reset.css files also have lineheight:1em and more

[shaneisme]

I was playing a bit coy, I know very well what a reset does.

The * property means you’re going to give everything zero margin and padding. A bit overkill.

But width: 100 is an invalid property as it does not have a unit, eg. %, px, em, etc.

I would look to Normalize. It only fixes the things that need to be fixed without overdoing things (and shaves off a few CPU cycles to your website). Plus, you can learn a lot about CSS that way.

https://github.com/necolas/normalize.css/blob/master/normalize.css

[Author]

Posts