Authentic voices. Remarkable stories. AOL On Originals showcase the passions that make the world a more interesting place.
Go behind the scenes with some of the biggest digital celebrities to see what life is like when the blogging and tweeting stops.
The story of punk rock singer Laura Jane Grace of Against Me! who came out as a woman in 2012, and other members of the trans community whose experiences are woefully underrepresented and misunderstood in the media.
Documentary shorts conceived of and directed by famous actors. Jeff Garlin, Katie Holmes, Alia Shawkat, Judy Greer, and James Purefoy
Park Bench is a new kind of "talking show" straight from the mind of born and bred New Yorker and host, Steve Buscemi.
Digital influencer Justine Ezarik (iJustine) is back. After covering the world of wearable tech last season, iJustine is expanding her coverage this year by profiling the hottest tech trends across the country.
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.
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.
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.”
Gwyneth Paltrow and Tracy Anderson spend time with women who've overcome hardship, injury, and setbacks to triumph in the face of adversity.
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.
ACTING DISRUPTIVE takes viewers inside the businesses and passion projects of Hollywood’s top celebrities.
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.
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.