L004. float

on CLOUD 9 || graphics & layouts tutorials
Please Subscribe to read the full chapter

float

 

 

 

1. You'll need to add this tag to almost every <div> group you have in order for your layout to function properly. If you do not add this tag, you'll face the problem of having your layout looking different in the editor and in the chapter itself and your layout will be messed up every single time AFF changes its layout.

 

<div style="float:left;width:200px;padding:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.</div>

<div style="float:left;width:200px;padding:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.</div>

<div style="float:left;width:200px;padding:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.</div>

 

The result of the above code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.

 

However, without the float tag,

 

<div style="width:200px;padding:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.</div>

<div style="width:200px;padding:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.</div>

<div style="width:200px;padding:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus.</div>

 

This is the result (they don't float/fit nicely anymore):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula risus vitae finibus laoreet. Ut sit amet ultricies nisl, ut tincidunt tellus. Lorem ipsum dolor sit amet, consect
Please Subscribe to read the full chapter
Like this story? Give it an Upvote!
Thank you!
Back to Top ↑

Comments

You must be logged in to comment
LilMinMinniexx #1
I'm currently learning how the coding works here (since there are quite a lot of code pieces that don't work here.) These are pretty good guides :)
gagnant #2
Chapter 4: hi?
can I ask you how to make this one "like this story? give it an upvote"
schneizel #3
i'm not a beginner, but i really need this to learn how to use more textures and stocks, and omf.
thanks for this; i'll be waiting for more!

also, may i request typography? it's always been a matter that i've been struggling with.
Vonchic #4
Chapter 11: You have, by far, the most helpful tutorials I've seen around! Seriously, I've been reading coding tutorials these days and I still had questions left hanging even after I read those tuts! I think it's because you're not just showing one way to do something but that you're showing what happens if you do this and not that. I'm looking forward to your scrollbar tut as I'm having problems making the scrollbar transparent on top of a background image. I know it will take a long time before we even get to that tutorial but I'm hoping it's one of things you will address! Thank you and have a good day!
Back to Top ↑