CSS Width / Height
Width / Height
Add the text in bold text to your style sheet just like it is below. A short page to add a width to the Wrapper and height to the footer.
Next page we will
style margins, border and padding. The other block elements(header, article, .nav and footer will automaticaly span 100% width of
the wrapper div. Since I am going to add box-sizing on the next page, Our margins, borders and padding will stay within the 960 pixel wide box.We will
center the wrapper with margins on the next page.
The height for everything but the footer will only take the amount of space it needs. But you can
specify height on everything if you want. I have added a height:100px to the footer below.
If using a 2 column layout, width will have to be used on the columns. I have a 98% width on the tables on this website. Many times you might make
your links on the navigation menu into block elements and you will use width for those. If putting 5 of them across the page, you might
use a width of width:20% on your a elements in the nav section.
#wrapper {
width: 960px;
}
footer {
background-color:#b0c4de;
background-image: linear-gradient(white, #4682b4);
color:black;
height:100px;
}
To see what it looks like so far Click Here(opens a new window)