CHAPTER#3: ADDING A SCROLLBAR

CHAPTER 3: ADDING A SCROLLBAR

This is for Hedupon-san. Actually, I have discussed this in the first chapter but here you go. We are going to use this image of an ulzzang couple <3

First of all, make a box shaped div and enclosed the image in there. This is my code

< div style="float:left;width:200px;height:152px;background-color:fff;overflow:auto" >< div style="float:left;width:200px;height:132px" >< img alt="original.png" src="http://images6.fanpop.com/image/photos/34300000/Ulzzang-Couple-ulzzang-world-34328786-500-331.png" style="width: 200px; height: 132;" />< /div >< /div >

See that boldfaced thing there? That does the magic. This is the current output

For the meantime, you can't see the scrollbar. So then, let's add this code under the second to the last < /div >
< div style="float:left;background-color:800000;width:200px;height:132px" >< /div>

That results into this:

And then let's combine this code with the previous one so it would be:

< div style="float:left;width:200px;height:152px;background-color:fff;overflow:auto" >
< div style="float:left;width:200px;height:132px" >< img alt="original.png" src="http://images6.fanpop.com/image/photos/34300000/Ulzzang-Couple-ulzzang-world-34328786-500-331.png" style="width: 200px; height: 132;" />< /div >
< div style="float:left;background-color:800000;width:200px;height:132px" > < /div >
< /div >

It will look like this:

I'll add some texts.

Couple Name: Here
Whatever
Whatever

REMEMBER: Overflow:auto is the key here. The outer div/foundation of your code should have a smaller height/width than the
actual overall size of it's contents so it will have a scrollbar.

ADVERTISEMENT: Do you like reading angst stories? Try the latest story I've written entitle A JINX IN TIME. Read it here

← 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?