Today’s Goals:

• Practice setting up a webpage with a header, left, and right sections with CSS floats

 Today’s Featured Site:

• https://cewe-photoworld.com/how-big-is-snapchat/– Guess how many photos are shared on Snapchat every second?

 CSS layouts

• Let’s review the box model (margins, border, padding)

  

• Let’s review positioning (static, relative, absolute, and fixed)

  

• In addition to using positioning properties, we can float content to the left or right and control how the other content flows around it.
• First, let’s watch this video
• To begin, let’s set up a new page in Notepad++ with opening and closing tags for html, head, title, and body. Don’t forget to add the style sheet tags in the head section!
• We’re going to set up a 2-column page with a header and footer that adjusts itself when we shrink the browser window.
• Let’s set up some div areas in our style sheet for a wrapper and header, left, right, and footer sections. We’ll add some properties soon.
• Let’s now add the corresponding div tags for each in the HTML. Let’s add paragraph tags in all of the sections and label each header, left, right, and footer. Let’s also grab a paragraph from here and add it to the left and right sections.
• Now grab some code from here for your style sheet for the wrapper.
• Let’s give the header a width of 100%, margins of 0px, and a background color of green.
• Now, let’s float the left section to the left with float: left. Let’s also add padding of 3px, a yellow background color, and a width of 60%.
• To the right section add float: right, padding 3px, background color blue, and width 30%.
• Now, how wide should the footer be? What about the margins? Let’s make it pink. Also, how can we get it to appear below our left and right sections?
• Let’s try adding this image to our #left section. How can we get the image to the left or right of the paragraph? How can we give it some breathing room so it’s not right up against the text?
• Let’s see what happens if our content took up more space than our left container allows. Give your #left section a height of 150px. What happens to the image and the text? Add overflow: hidden and then overflow: auto in your #left section to see what happens.
• There is a way to fix this issue. Let’s use this code as a model.