today, i'm going to teach you how to make this layout:

whenever i make a new layout, i open up a new blog post. that way, i can code and view the preview without actually adding another chapter on accident. let's familiarize ourselves with the AFF editor. we'll be working with the following button the most:

clicking the button on the left will enable you to see the source code, while the button on the right gives you a preview in another window.

when coding a layout, you're going to be working with the div and span tags most of the time. i've already taught you about the span tag, but for many of you, it's the first time you've seen the div tag. the div tag makes up the basis of all your layouts, and how things look.

there are many attributes in the style section of a div:

margin: sets how many pixels of space between the div and other content
    — top right bottom left [10px 60px 15px 80px]
padding: sets how many pixels of space between the div and the contents inside
    — top right bottom left [ 8px 12px ]
height and width: sets the height and width
    — can be in pixels (500px) or percentage (80%)
background color: sets the background color of a div
border: sets the border of a div
    — thickness type color [2px dashed #999999]
line-height: sets the line spacing of the text inside
    — can be in pixels (12px) or a decimal number (1 or 1.5)
text-align: sets the alignment of the text inside
    — left, center, right, or justify

to start out with our sample layout, i chose a small width and height, going with 150px by 80px. the background color i chose is #f5a68a. let's start coding!

the size looks fine, and the background color is good—but let's add some padding and customize the text!

it's important to note that using padding ADDS width and height to your div. since we added 15px on each side, 30px has been added to the dimensions (now 180px by 110px).

let's tweak the line-height a little bit and add some more text. i always use this website when i need to add some placeholder text.

we've run into a problem—the text flows out of the box! i'm sure this is what many of you face. to fix this problem, we're going to use the overflow attribute and set it to auto. this enables users to scroll to see more text.

< div style="width:150px; height:80px; background-color:#f5a68a; padding:15px; line-height:11px; overflow:auto;" >< span style="font-family:arial; font-size:9px; letter-spacing:1px; color:#ffffff;">hello this is a bunch of sample text. i wonder how this will turn out! lorem ipsum dolor sit amet, consectetur adipiscing elit. donec feugiat tempus lectus eu faucibus. morbi vel mauris vitae dolor egestas accumsan. mauris sed tellus porttitor, posuere neque in, euismod odio. integer et arcu sed justo dictum convallis.< /span >< /div >