CHAPTER#6: FLOAT BASICS

CHAPTER 6: FLOAT BASICS

Hi! I'm back with a new tut/guide and this time it will be about the "Float" property.

"The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it." - MOZILLA DEVELOPER NETWORK

Basically it's a positioning property. You could see more about it here.

But how useful is it in aff?

Let's consider this layout with float:left properties.

This layout's outer structure is actually like this

The black there holds those two divs with smaller heights than the one on the left (so that the smallest will be under the 2nd smalles in terms of width.

What if there's no float?
This happens. (Do you see the long one behind the texts up there? The other one went there!)

In simple terms, float makes coding easier.

The question is how do you use it to position your contents?
Basically, when you use float in ALL your divs, you just have to code in a linear way. Meaning, what you put on top, will be underneath. and the bottom piece of the code is the uppermost layer (like an inverse photoshop layering!)

Like for example:
< div style = "float:left" > this is under on actual appearance< /div >
< div style = "float:left" > this is upper on actual appearance< /div >

And you can also overlap things easily!

div 1

div 2

Here's the piece of code used

< div style="float:left;width:200px;background-color:#000;margin-left:10px;padding:10px" >
< div style="float: left; height: 200px; width: 200px; margin-left: 0px; text-align: center; background-color: rgb(211, 211, 211);">div 1< /div >
< div style="float: left; height: 90px; width: 100px; margin-left: 0px; margin-top: -30px; text-align: center; background-color: rgb(255, 255, 255);">div 2< /div >
< /div >

NOTE: THE OTHER DIV THERE HOLDS THE TWO SO THEY WOULD NOT GO LIKE THIS

div 1

div 2

Float also helps so that when you place links on images, they don't go to where you don't want it to be. But then again you still have to use margins if you want to put spaces between contents. But if you are using margins to position your contents it may help you save time.

In aff, float left is the most commonly used. It really does help to keep things from being messy. The only things you have to remember is the top = bottom / reverse photoshop layering and if you want to position two shorter divs parallel to a longer div you have to use an other div for the shorter two to hold them together and fit the space.

If you have questions, clarifications please do tell me! :)

← Previous Chapter

Comments

You must be logged in to comment

Janmidget #1 Nov 6, 2017 17:20:30

I made my own code for chapter layout following some instructions in every tutorial I happen to scan here in aff but can you help me how to make a picture as text background? Every time I am following the <div tag with <img tag its just topping my text box. It didn’t turn out as BG and I’mma lil bit frustrated abt it.

Theartdevotee #2 Feb 6, 2017 02:22:22

Is the layouting on tumblr the same with aff?

Leonny #3 Apr 7, 2016 18:47:04

Chapter 7: I'm still confused about the float thingy-- like, does it save you time from writing the "margin border this" or smtg like that¿? It's been many months since I last coded.

slategrey #4 Apr 1, 2016 03:24:53

Chapter 5: Thanks for making this thread! Quick question though, does the positioning of the div apply the same even if you add links on it, or images? I don't use "float" generally as it doesn't work for me both for images and divs so I just use "margin" to position the boxes (I hate this part most in coding like for real since it's very hard to align them using margins, and although float seems easier, I can't make it work like GAH). I've seen you do the same with images and a div together (using margin) so no problem with that I guess, but how do I do it with two divs?