Authentic voices. Remarkable stories. AOL On Originals showcase the passions that make the world a more interesting place.
Hank Azaria’s touching, humorous, and often enlightening journey from a man who is not even sure he wants to have kids, to a father going through the joys, trials and tribulations of being a dad.
Gwyneth Paltrow and Tracy Anderson spend time with women who've overcome hardship, injury, and setbacks to triumph in the face of adversity.
Enter the graceful but competitive world of ballet through the eyes of executive producer, Sarah Jessica Parker. This behind-the-scenes docudrama reveals what it takes to perform on the ultimate stage, the New York City Ballet. Catch NYCB on stage at Lincoln Center.
ACTING DISRUPTIVE takes viewers inside the businesses and passion projects of Hollywood’s top celebrities.
Explore what it means to be human as we rush head first into the future through the eyes, creativity, and mind of Tiffany Shlain, acclaimed filmmaker and speaker, founder of The Webby Awards, mother, constant pusher of boundaries and one of Newsweek’s “women shaping the 21st Century.”
They say every picture tells a story and AOL On's new original series My Ink proves it. Travel along as some of the world's greatest athletes bring their tattoos to life through exclusive interviews and visits to their favorite tattoo parlors.
Discover crowdfunded small business success stories with author, comedian, and entrepreneur Baratunde Thurston.
Go behind-the-scenes with racing's hottest, young talent, 17-year-old Dylan Kwasniewski, as he aspires to make it in the #1 motorsport in America – NASCAR
Follow Scott Schuman, the Sartorialist, from the streets of NYC to the capitals of Europe on his quest to photograph and document the best in culture and fashion.
Iconic potter, designer, author and personality Jonathan Adler shares his unique perspective on creativity. Showcasing the inspiration Jonathan finds in the most unlikely people and places, Inspiration Point will add style, craft and joy to your life.
Serving Innovation gives a fresh look into the stories and passions that motivate some of the most innovative tastemakers in America.
A documentary directed by Alex Winter exploring the Napster downloading revolution; the kids who created it, the bands and businesses that were affected and its impact on the world at large.
Nicole Richie brings her unfiltered sense of humor and unique perspective to life in a new series based on her irreverent twitter feed. The show follows the outspoken celebrity as she shares her perspective on style, parenting, relationships and her journey to adulthood.
Learn about aligning Divs side by side in this Adobe Dreamweaver CS3 Essentials training video series.
Tags:adobe,adobe dreamweaver cs3,align,divs,essentials,side by side,total training
Grab video code:
So we now have four divs with an image and a text image beneath it in each div, and if we look at the code you will see that we have nicely separated them and Dreamweaver has created the code in a pretty clean way. So I have got my family div with the images. I have got my waiting div with those images. Leaves and barry. I am ready to start applying some styles to this page so you can see how CSS can be used for alignment as well as basic formatting.
To give you a bigger view as I do this, I am going to go back to just Design view at this stage. Scroll up a little higher on the page, so that you can better see what happens as I align these divs; actually let's get it right there.
So this div, if you forget what a div is called, you can always select the div and then look at the handy little tag selector at the bottom; oh yeah, this is my barry div. When I go to create a new style to position my barry div, watch what happens. Click on the New Style button and Dreamweaver knows that I am in the barry div, so it automatically inserts #barry.
It has also included #container, because you can create advanced styles that are very specific. I could create a style that will only affect a div called barry if its inside a div container. At this stage, I know I am only going to have one div on the page called barry, so I don't need to be that specific, and I want to simplify things a little bit. So just trust me that you don't need the container in this selector. We are just going to create an ID style named for each of these divs.
Now, as I create this style I want to do several things at once. The first thing I want to do is under the Block settings, I want to set Text align to center. Now, I told you can't center a div on a page, but you can center the contents within a div by using Text align center.
I also want to go back to my Box settings. We will use this category a lot when we are moving things around a page. This time I am going to add some Margin space. I am going to put 5 pixels of Margin all the way around this container, and I am going to put 5 pixels of Padding as well. Padding goes on the inside of the container, Margin goes on the outside, and as we do this a couple of times I think you will start to see the effect.
The other trick I am going to use here is the Float. If I choose Float left, you will see immediately when I click OK, that that pushes my div over to the left and brings the things that are below it up around beside it.
So let's do something similar for the next div; that's our leaves div. Again, if we just click the New button, we can remove the word container, click OK. Now, I am going to create the same kind of style. Set Blocks so that our content will ultimately be centered within this. Under Box, I am going to set Padding to 5, Margin to 5, Float to left. When I click OK, you see these divs are now side-by-side.
As you might imagine, if we do the same thing for the next div, this time let's set Block to center, and in the Box settings I am going to set Padding to 5, but I am not going to set Margins for a moment. I think this will help you understand the difference between Margins and Paddings. So let me go ahead and Float this left. Click OK.
So you can see if I select the waiting div, that I have 5 pixels of Padding inside the div and at the moment I have no Margin on the outside, because I didn't set that. In contrast, if I select the leaves div, you see I have 5 pixels of Padding inside and I have 5 pixels of Margin outside.
So that's the difference between Margin and Padding. Margin is on the outside of the element, Padding is on the inside of the element, and they can be used separately and in combination for various effects.
So let's go back and add the outside, the Margin. You can do that by choosing Add Property or you can do that by just double clicking on the style you just created, going back to Box, and adding your 5 pixels to all four options. You see it's instantly applied. Let's do the very last one.
Here is another trick. I have now created three out of four of these, but anytime you are creating a series of styles that are all almost the same, you can always right click and choose Duplicate. I am duplicating the waiting ID style and I am going to call it #family.
Now, you have to be careful here, because you have to make sure that whatever you named that div, you type in here exactly the same way. If you have any variation; an extra space or case difference, this may not work. So click OK. What you see now is that I have created a family div that's identical to the waiting div and it has been instantly applied.
Now, you may wonder why the page doesn't look quite as good here as it does in the final design, and I will show you how to fix that in just a moment. But what's happening is, I have now floated all four of these divs, but my container div isn't floated. So they are out of line with each other. There is a wonderful little trick I can use to fix this by adding a footer to the bottom with a Clear setting, and that will bring the container div down below all four of my image divs.