XHTML
Display Picture Make Text Link Make Image Link Basic Text Attributes Make a List Easy Back Button HEX ColoursCSS
Font/Colour Attributes Roll Over-text Roll Over-image Borders Float Margins Padding BackgroundsOther Useful Tips
Add to Search Engine TermsLayout: Float
In this section, your going to want to test your work on multiple browsers. There is a lot of CSS code that has become obsolete because it won’t work in many browsers (some code doesn’t work in anything!), this is where cross browser testing is really going to be necessary. In this section, you will be primarily be working with three different Style Rule declarations: FLOAT, MARGIN, and PADDING. These will most likely be applied to your div id’s. These rules may seem easy to understand at first, but it does take a lot of experimenting and discovering in order to get your content positioned exactly the way you want, especially to make it work in all browsers. After you learn how to use these three declarations, I urge you to continue reading the rest of this section, because it’s not as simple as just knowing how to use those three declarations, there are other things you must know to use them effectively. The first one I’ll show you is the FLOAT.
Here is a couple of images:
I want them to be side by side, so I add this style rule to each of them:
CSS
What The Code Does
#my_image_1 {
float: left;
#my_image_2 {
float: left;
}
When you apply this to the first item, it basically brings the next item below, to be position right beside it. You must also apply this to the second item as well, otherwise it will be positioned sort of strangely.
Also, if the containment area is not big enough for your item, it will not get pulled up beside. This will also happen when the user is resizing the window, things will be shifting all over the place. To avoid this, make sure you have at least display: block; and width: ***px.
