Creating the sidebar boxes


show more Creating the sidebar boxes provides you with in-depth training on Web. Taught by Eric Meyer as part of the CSS Web Site Design show less
please wait ...

Creating the sidebar boxes

Heaving done at this point, roughly half of our design, we're now going to move on to styling the sidebar, which is actually kind of invisible at the moment, but if we scroll down we can find it all right here. What we're going to do is pull in the part that makes the sidebar go where it goes. Here we are floating the sidebar to the left and giving it a certain width and then using the negative margin trick. What we have a negative left margin that is larger than the width of the floated element. So in this case to a width of 17em and I'll give it a negative left margin of 18em. If the width had been a 200 pixels, I could've given it a negative left margin of 201 or a negative of 210 pixels or even negative of 200 pixels. The goal here is to get the sidebar width to be mathematically zero, even though it has a width of 17em.

The margin is subtracted from that, the side margins just are subtracted from that to get a sort of a mathematical layout width and so your goal here...

Creating the sidebar boxes
Video duration: 5m 41s 6h 8m Intermediate

Viewers:

Creating the sidebar boxes provides you with in-depth training on Web. Taught by Eric Meyer as part of the CSS Web Site Design

Subject:
Web
Software:
CSS
Author:
please wait ...