CHAPTER#1: OVERFLOW PROPERTY

CHAPTER 1: OVERFLOW PROPERTY

So now, I have free time and thought I must post something here. And in this chapter, we're gonna discuss the overlow propery.

Overflow propery: What does it do?
The overflow propery acts as something that specifies whatever will happen when there is an overflow in the content. Like, when you have a div and the text exceeds the height of your div, this is where the overflow gets in action. The overflow propery has the following attributes:

Visible - default (nothing to explain for real).
Hidden - the excess content is clipped. E.g.

This text is so stupid that it gets clipped and whatever blah blah blah blah blah blah
blah try to read what's this.

Scroll - the content is clipped, yet there is a scrollbar.

This text is so stupid that it gets clipped and whatever blah blah blah blah blah blah
blah yes you've read that right.

Auto - if the content exceeds your div., there will be a scrollbar automatically

This text is so stupid that it gets clipped and whatever blah blah blah blah blah blah
blah yes you've read that right. (without excessive content)

This text is so stupid that it gets clipped and whatever blah blah blah blah blah blah
blah yes you've read that right. (with excessive content)

I think that's all I have to discuss about the attributes? So now I'm going to teach a technique most of the coders here use.

Shrinking the scrollbar.
How to do it exactly? Here's the basic code structure I prefer to use.

< div style="float:left;width:300px;height:270px;margin-left:0px;margin-top:0px;padding:0px;text-align:justify;background-color:transparent;margin-bottom:0px;line-height:13px;overflow:hidden;padding:5px ">
< div style="float:left;width:297px;height:252px;margin-left:0px;margin-top:0px;padding:10px;text-align:justify;background-color:transparent;margin-bottom:0px;line-height:13px;overflow:auto;padding:10px ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nulla erat, in tincidunt est vestibulum et. Nulla blandit enim vitae leo dapibus fringilla. Maecenas ultrices ultricies nibh ut maximus. Ut sed purus ut ante malesuada euismod at eget erat. Quisque cursus nunc et erat eleifend ornare. Donec hendrerit auctor augue ac dapibus. Sed sodales turpis sodales ultrices pharetra. Sed eu malesuada ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit laoreet viverra. Vivamus efficitur laoreet quam, maximus gravida lacus lacinia eu. Morbi sollicitudin rutrum tristique. Fusce pretium auctor mauris id scelerisque. Donec dignissim leo vel felis placerat dapibus. Maecenas augue purus, pretium eget ligula ut, consectetur rhoncus justo. Phasellus at sapien in velit dictum tincidunt et in leo. Duis vehicula odio nec mi gravida, quis hendrerit enim mollis. Vivamus a pretium est. Vivamus facilisis nisi vel elementum aliquet.
< /div >
< /div >

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nulla erat, in tincidunt est vestibulum et. Nulla blandit enim vitae leo dapibus fringilla. Maecenas ultrices ultricies nibh ut maximus. Ut sed purus ut ante malesuada euismod at eget erat. Quisque cursus nunc et erat eleifend ornare. Donec hendrerit auctor augue ac dapibus. Sed sodales turpis sodales ultrices pharetra. Sed eu malesuada ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit laoreet viverra. Vivamus efficitur laoreet quam, maximus gravida lacus lacinia eu. Morbi sollicitudin rutrum tristique. Fusce pretium auctor mauris id scelerisque. Donec dignissim leo vel felis placerat dapibus. Maecenas augue purus, pretium eget ligula ut, consectetur rhoncus justo. Phasellus at sapien in velit dictum tincidunt et in leo. Duis vehicula odio nec mi gravida, quis hendrerit enim mollis. Vivamus a pretium est. Vivamus facilisis nisi vel elementum aliquet.

How did I do that? Well, I just added a div with the "overflow:hidden" and then under that, I added another div with the "overflow:auto" to add scrollbars and enclose it with two(2) < /div > tags (one for the hidden div and the other for the auto div). And the one with auto must have smaller/bigger width (it all depends on your padding). But if they don't have padding, or has the same padding size, most likely the width of the one with hidden attribute would be width:300px and the one with auto would be width:297px (just the same with my example yas) and it won't be so hard to play with the width property so there should be no problem for you.

Also, the hidden attribute does a lot of things. For example clipping an image like this

But there must be an inner div with the width that has the same value as your image so it won't shrink (esp. with the new, blue aff layout). Here is the code I used for that. ^

< div style="float:left;overflow:hidden;height:123px ">
< div style="float:left;width:420px ">
< img alt="fRRgchT.png" src="http://37.media.tumblr.com/tumblr_mdve4xBg5M1rfp1lho1_500.gif" style="height:236px;width:420px;margin-left:-40px;opacity:1;" / >
< /div >
< /div >

← Previous Chapter Next 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?