When positioning text and/or pictures using CSS it is often desired to have one element stay on the right or left of the other element instead of being beneath the other element. The CSS attribute float helps achieve this goal. The float attribute only works with elements whose position is relative. Absolutely positioned elements will ignore floated elements.
Here is a list of the possible floating attributes you can use:
What is interesting about floating is that if one element takes up less verticle space than the other, the longer text element will wrap around the smaller. This creates interesting effects.
I will now show an example in which a short newspaper article is kept to the left of a longer article.
Don't let your turtle outsmart you. Be tough!
Once your turtle figures out you bring the food, he or she may be quite excited to see you. And if you don't have food, they sometimes swim back and forth frantically, and manage to look like are starving and need food -- now! Don't let them fool you, though, because obesity can be a big problem in turtles.
To get this effect I have made the shorter test position:relative and float:left. This will cause the next paragraph to start at the same height position as the shorter text. In order to show this clearly I adjusted the widths of the paragraphs. I can adjust the space between the two sets of text using padding.
What you should be asking is why does the shorter text start slightly lower than the longer text? They should start at the same point. The answer is that all paragraphs have some default CSS settings that are generally good, but lead to undesirable behavior when we start playing around with CSS. I will fix this by setting the margin-top of the shorter paragraph to 0px. (It was previously set to something like 10 pixels.) See the source code for this page.
Don't let your turtle outsmart you. Be tough!
Once your turtle figures out you bring the food, he or she may be quite excited to see you. And if you don't have food, they sometimes swim back and forth frantically, and manage to look like are starving and need food -- now! Don't let them fool you, though, because obesity can be a big problem in turtles.
I can also have three columns by adding a third paragraph and making the second one also float:left. When setting the paragraph width of the third paragraph , bear in mind that the width must allow for the other two paragraphs plus the desired width. Thus if the first two paragraphs have a combined width of 5.2 inches, you will need to make the third paragraph width 9 inches just to get an effective 3.8 inches to write in.
Don't let your turtle outsmart you. Be tough!
Once your turtle figures out you bring the food, he or she may be quite excited to see you. And if you don't have food, they sometimes swim back and forth frantically, and manage to look like are starving and need food -- now! Don't let them fool you, though, because obesity can be a big problem in turtles.
Red eared sliders need a diet that is a mixture of animal and plant material. However, young red eared sliders eat more animal protein so babies are started off on a diet that is more on the carnivorous side. It is still a good idea to offer vegetation to young turtles although they may not really start eating it until they get older (offering it early on at least makes it less likely they will shy away from trying it as they age). For adult red eared sliders, vegetation should make up a significant part of the diet.
Here I make the third paragraph width only 6 inches, and I get a text wrap around.
Don't let your turtle outsmart you. Be tough!
Once your turtle figures out you bring the food, he or she may be quite excited to see you. And if you don't have food, they sometimes swim back and forth frantically, and manage to look like are starving and need food -- now! Don't let them fool you, though, because obesity can be a big problem in turtles.
Red eared sliders need a diet that is a mixture of animal and plant material. However, young red eared sliders eat more animal protein so babies are started off on a diet that is more on the carnivorous side. It is still a good idea to offer vegetation to young turtles although they may not really start eating it until they get older (offering it early on at least makes it less likely they will shy away from trying it as they age). For adult red eared sliders, vegetation should make up a significant part of the diet.
Here I am trying to get the text wrap around with three paragraphs.
Don't let your turtle outsmart you. Be tough!
Once your turtle figures out you bring the food, he or she may be quite excited to see you. And if you don't have food, they sometimes swim back and forth frantically, and manage to look like are starving and need food -- now! Don't let them fool you, though, because obesity can be a big problem in turtles.
Red eared sliders need a diet that is a mixture of animal and plant material. However, young red eared sliders eat more animal protein so babies are started off on a diet that is more on the carnivorous side. It is still a good idea to offer vegetation to young turtles although they may not really start eating it until they get older (offering it early on at least makes it less likely they will shy away from trying it as they age). For adult red eared sliders, vegetation should make up a significant part of the diet.
This paragraph will be floated to the left. Will that have any affect on it considering it is the last paragraph
on the page? NO
©Nachum Danzig 2010