What are Divs?

A div sections a part of the page so that you can apply different styles to that part. It's helpful for formatting as opposed to using tables.

Using Divs

To create divs, you need to use some basic HTML code. Every div needs to start with <div> and end </div>, everything you want in that div goes between those pieces of code.

Styling a Div

Part of the reason you create divs is to add different styles to parts of your page. To style a div, add the following code to the beginning of your div: <div style=" ">. Between the quotation marks, you can add elements to style your div. Here's some common styles you may want to use:

*Note - you can combine as many styles as you'd like within the quotation marks as long as each is separated by a semi colon

*To use NU colors, reference the branding webpage to insert the hexcode # into the div style

width - allows you to set a width of your div as a percentage or number of pixels
- Ex: <div style="width: 75%; "> or <div style="width: 800px; ">
background color - allows you to change the color of the background for that section
- Ex: <div style="background-color: blue; ">
text color - allows you to change the color of the text for that section
- Ex: <div style="text-color: #4E2A84; ">
padding - allows you do put a buffer within the div on all sides of the div so the text or image does not go to the edge of the div. This is helpful when using a div for formatting instead of a table. This can be added as a number of pixels
- Ex: <div style="padding: 10px; ">
- Ex: <div style="padding-top: 10px; ">
- Ex: <div style="padding-right: 10px; ">
margin - puts distance between your div and content above, below, left and right. Can be used specifically for one direction as well
- Ex: <div style="margin: 10px; ">
- Ex: <div style="margin-left: 10px; ">
- Ex: <div style="margin-top: 10px; ">
border - puts a border around your div. When using this, you need to include the size, color, and style
- Ex: <div style="border: 10px solid red; ">
float - this allows a div to be next to another set of text or image. This is key for creating a table effect for formatting
- Ex: <div style="float: right; ">
- Ex: <div style="float: left; ">

Image Credit: How to Canvas by Sean Nufer