In need of a [div] wizard

[Skyswimsky]

Hey.

I have been trying for a few hours to get something to work and make more or less good progress - except one thing: I want the left image to center vertically based on the length of the content to the right.

Bla1

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.

But I want is more like this instead. I like the auto-scale property of the image in combination with the width % div tag, so I'd rather not change it.

Here is the raw code:

[tabs][tab=Bla1][div][div=width:30%;display:inline-block;margin-right:5px;][img]http://sv.bagoum.com/getRawImage/0/0/junossecretlaboratory[/img][/div][div=display:inline-block;vertical-align:top;width:68%;][div][div=float:right;border-radius: 4px; width: 32px; height: 32px; box-shadow: 0 0 2px 1px#0080FF;][div="opacity: 0.125; width: 32px; height: 32px; overflow: hidden;"][div="position: absolute; top: -134px; left: 0;"][media=youtube]FGiXDUi_V2g[/media][/div][/div][/div][/div][div=margin-top:32px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.[/div][/div][/div][/tab][/tabs]

Thank you for your time!

 

[Absyinthe_Artica]

I think I may be able to help you, I just had a question first.
Why do you have a blank div tag? As far as I am aware div tags with no coding displayed on them will not show up? ^.^

 

[Skyswimsky]

I think I may be able to help you, I just had a question first.
Why do you have a blank div tag? As far as I am aware div tags with no coding displayed on them will not show up? ^.^

I don't think that is the case? When I did this I was thinking alongside 'boxing' the stuff into different areas, hence some(I think two?) div tags having no coding in them. However, if you try something like this:

[div]hello[/div][div]hello[/div]

or

[div]hello[div]hello[/div][/div]

You will see two different results that do not equal a simple "hellohello":

hello

hello

hello

hello

Feel free to correct me if I am misunderstanding something though, english isn't my mother language.

 

[Absyinthe_Artica]

Alrighty I think I solved this. So the div right before your image url will just need to add the top: XXpx; property to move the image up and down with the length of the text. It will look like this:

[tabs][tab=Bla1][div][div=width:30%;display:inline-block;margin-right:5px; top:100px;][img]http://sv.bagoum.com/getRawImage/0/0/junossecretlaboratory[/img][/div][div=display:inline-block;vertical-align:top;width:68%;][div][div=float:right;border-radius: 4px; width: 32px; height: 32px; box-shadow: 0 0 2px 1px#0080FF;][div="opacity: 0.125; width: 32px; height: 32px; overflow: hidden;"][div="position: absolute; top: -134px; left: 0;"][media=youtube]FGiXDUi_V2g[/media][/div][/div][/div][/div][div=margin-top:32px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.[/div][/div][/div][/tab][/tabs]

Whenever you want to center the image more, just adjust the amount of px that the top property will have. I have it at 100px right now and this is what the overall layout looks like:

Bla1

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.

Is this what you wanted?

 

[Skyswimsky]

@WhisperingWillows Thank you for your suggestion but that is not what I wanted. I'd like to have it more dynamic rather than a set amount of pixels. It doesn't even work as a work-around as the width, and thus the amount of lines for the text, appears different depending on the individuals resolution.

 

[Absyinthe_Artica]

Unfortunately, as far as I know that is the only way you can change where the picture is centered. As far as I know there isn't a code to make it "Dynamic" like you want it to on Iwaku.
@FireyCold Do you know of any codes that will fix this user's problem?

 

[Noctis the Devious]

Is this what you're looking for? All I did was take Willow's code, set a width for the text so it will show up the same for any device (except for mobile) and aligned the image as needed:

Bla1

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.

code

[tabs][tab=Bla1][div][div=width:30%;display:inline-block;margin-right:5px; top:200px;][img]http://sv.bagoum.com/getRawImage/0/0/junossecretlaboratory[/img][/div][div=display:inline-block;vertical-align:top;width:68%;][div][div=float:right;border-radius: 4px; width: 32px; height: 32px; box-shadow: 0 0 2px 1px#0080FF;][div="opacity: 0.125; width: 32px; height: 32px; overflow: hidden;"][div="position: absolute; top: -134px; left: 0;"][media=youtube]FGiXDUi_V2g[/media][/div][/div][/div][/div][div=margin-top:32px;][div=width: 500px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a suscipit dui, vestibulum pulvinar magna. Phasellus vehicula purus felis, sit amet ullamcorper turpis gravida quis. Nulla nec lobortis arcu. Sed quis lacinia urna, ac semper enim. Donec volutpat lacus vel mi pulvinar maximus eget quis nunc. Vivamus rutrum dictum lorem, ac lobortis sem mollis in. Duis sed urna in lectus iaculis consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed dolor vitae ex lacinia semper. Integer id felis sodales, molestie urna eu, condimentum ante. Suspendisse arcu dui, cursus a iaculis a, rhoncus fringilla tellus. Nam ullamcorper dolor nec nulla scelerisque molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate orci at nibh mollis hendrerit. Nunc feugiat mi urna, dignissim gravida orci placerat non. Quisque finibus, nisl at dictum auctor, ex lorem venenatis sem, ut imperdiet justo urna vel enim.[/div][/div][/div][/tab][/tabs]

 

[Skyswimsky]

@Noctis the Devious I already have the width for the right set set in an earlier

tag. And same problem still exists with the top:?px being something static rather than dynamic. Thanks for the help though.

@WisperingWillows I see, well, guess I have to accept that for now.

 

[Celaira]

Do you mean you want it to, like, auto-scroll with the length of the post? 'cause I don't think you can do that with iwaku's code unfortunately ^^;

 

[Noctis the Devious]

@Noctis the Devious I already have the width for the right set set in an earlier

tag. And same problem still exists with the top:?px being something static rather than dynamic. Thanks for the help though.

@WisperingWillows I see, well, guess I have to accept that for now.

Then I don't quite understand what you mean by dynamic? What are you trying to do?

 

[Nebulon Ranger]

Do you mean you want it to, like, auto-scroll with the length of the post? 'cause I don't think you can do that with iwaku's code unfortunately ^^;

Actually, in theory you could by using position:sticky;, but not all browsers support it.

Then I don't quite understand what you mean by dynamic? What are you trying to do?

If I'm understanding the OP correctly, it sounds like he's trying to make an image element that scrolls with you as you scroll past it, and outside of some jQuery wizardry with the Sticky plugin, there's no real way to do this with plain CSS that works with all browsers on all platforms.

 

[Vars]

Unless you specify a specific height for the div then you can't do this easily with divs.
YOU CAN do it with tables, however. [td] has a special property, vertical-align:middle that automatically does what you want it to do.

Only issue I had was you still need to incase the image in a div for the auto-resize. Or specify a specific image size (maybe something like max-width: 500px; height:auto; )

Hope this helps.

1 2 longer text no change in code

• 
  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit faucibus massa in egestas. Curabitur convallis faucibus feugiat. Mauris tincidunt urna eget est viverra tristique. In augue orci, varius non lacinia vitae, mollis a sapien. Maecenas ultricies leo ligula, ac ullamcorper felis lacinia vel. Suspendisse in porttitor justo. Aliquam diam arcu, facilisis non pretium faucibus, congue sit amet nisi. Morbi pulvinar pellentesque lacus, id fringilla dolor vestibulum eu. Nullam aliquam scelerisque sapien at sagittis. Suspendisse vitae accumsan nisl. Curabitur quis massa semper, congue dolor lobortis, lacinia nisi. Fusce pretium, nisl sed lacinia placerat, orci arcu sollicitudin mi, et luctus sapien eros a libero. Vivamus suscipit eu tortor sit amet pellentesque. Nam sed placerat mi. Vivamus in arcu eget justo rhoncus sodales. Sed quis dolor eu metus lacinia facilisis. Morbi id vehicula arcu. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis.

• 
  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit faucibus massa in egestas. Curabitur convallis faucibus feugiat. Mauris tincidunt urna eget est viverra tristique. In augue orci, varius non lacinia vitae, mollis a sapien. Maecenas ultricies leo ligula, ac ullamcorper felis lacinia vel. Suspendisse in porttitor justo. Aliquam diam arcu, facilisis non pretium faucibus, congue sit amet nisi. Morbi pulvinar pellentesque lacus, id fringilla dolor vestibulum eu. Nullam aliquam scelerisque sapien at sagittis. Suspendisse vitae accumsan nisl. Curabitur quis massa semper, congue dolor lobortis, lacinia nisi. Fusce pretium, nisl sed lacinia placerat, orci arcu sollicitudin mi, et luctus sapien eros a libero. Vivamus suscipit eu tortor sit amet pellentesque. Nam sed placerat mi. Vivamus in arcu eget justo rhoncus sodales. Sed quis dolor eu metus lacinia facilisis. Morbi id vehicula arcu. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis. Suspendisse feugiat metus mollis, ornare eros eu, viverra ex. Nam ullamcorper sed nisi vel tempus. Cras justo metus, viverra eget magna in, aliquet facilisis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eleifend felis ut venenatis vulputate. Cras mauris ligula, aliquam a nunc vel, interdum aliquam nunc. Nulla semper sed elit imperdiet tristique. Duis ac mi turpis. Quisque maximus lorem quis tempus finibus. Praesent non leo vel est euismod molestie a venenatis mauris. Morbi vel elit id nisi lacinia pulvinar. In elementum nisi non laoreet facilisis. Aenean vitae dignissim velit. Proin tempor elit sit amet varius venenatis.

[table=border:none;][tr][td=border:none;vertical-align:middle;text-align:center][div=max-width:300px;height:auto][img]http://sv.bagoum.com/getRawImage/0/0/junossecretlaboratory[/img][/div][/td][td=border:none;] placeholder text goes here[/td][/tr][/table]

 

[Skyswimsky]

Welp, a table worked pretty smoothly. Maybe I should have shot for a table from the get-go? Wanted to get more experience with the div tag too thou. Tweaked your stuff a bit and made everything how I wanted it to be. Literally removing every div tag except for the Youtube-player thing. Thank you very very much!

Blah

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui mauris, sit amet placerat ipsum congue vel. Vivamus tincidunt est non nisl ultricies, vitae ullamcorper erat consequat. Nullam quis turpis bibendum, efficitur ante vel, dictum tellus. Pellentesque eu lorem placerat, sollicitudin augue at, mollis elit. Duis viverra mi ut orci mattis iaculis. Nullam non sapien pretium enim finibus ultricies. Donec iaculis quam condimentum mi efficitur vestibulum. Pellentesque ultrices et ipsum eu tincidunt. Aliquam tortor nunc, malesuada eget mattis quis, efficitur sit amet nunc. Mauris sed dignissim sapien, sit amet pretium tortor. Pellentesque lobortis tortor et quam ullamcorper maximus a a dui. Morbi vitae accumsan enim, ac laoreet augue. Curabitur eu lacus sagittis, euismod turpis vitae, dignissim nibh. Duis euismod tincidunt dolor aliquet faucibus. Vestibulum libero ante, maximus a vestibulum eget, dapibus a urna. Vivamus nec mattis velit. Nulla malesuada varius enim, eget accumsan nibh pellentesque non. Pellentesque porttitor neque sed erat suscipit rutrum ut et lectus. Pellentesque sollicitudin leo sed lacus posuere tempus. Aenean quam velit, semper sit amet mollis ut, faucibus quis nunc. Integer eget est sapien. Vestibulum eget justo aliquam orci posuere hendrerit in vel ex. Nam efficitur risus quis sapien eleifend aliquet. Ut eleifend neque porttitor velit cursus, at efficitur nulla feugiat. Aliquam euismod, arcu at mattis cursus, ligula turpis rutrum turpis, vel commodo ipsum sem at nisl. Donec auctor magna nec est scelerisque, sit amet sodales nunc consectetur. Sed eget turpis magna. Curabitur justo leo, accumsan eu ultrices et, accumsan in metus. Praesent urna quam, dignissim sit amet tellus in, euismod tincidunt nisl. Vestibulum viverra ante quis suscipit finibus. Etiam neque dolor, egestas id ligula a, aliquet sagittis risus. Suspendisse potenti. Sed tempus tellus neque, ut imperdiet lacus ornare in. In aliquam elit ut ante commodo luctus. Ut id semper orci. Ut interdum suscipit rutrum.

 

[Vars]

@Skyswimsky you still need to put the image in a div. The table doesn't do the auto resize. You can force a resize by specifying a max-width (for my code it was 300px) and setting height to auto.

This is why I just started over rather than trying to edit your code. XD
I hope you're able to make everything perfect with tables, though.

edit: I say this because on my screen, your image is full size and the first td is well over 30% of the table in your post.

 

[Skyswimsky]

@Vardoger Weird...it looks just as intended for me. Of course, you can click the image to resize it. Maybe it's because of the browser/different settings? Annoyed Asked like 10 other people and they all had no problems either except one person. That said, what you presented me produced a rather small outcome on my side.

 

[Vars]

@Skyswimsky looks like it's just my browser. Loaded this page up in Chrome and you're right, it's fine. But for laughs: Imgur: The most awesome images on the Internet

I wouldn't worry about it, I use a pretty niche browser pretty much nobody else does (Pale Moon).

 

[Skyswimsky]

@Skyswimsky looks like it's just my browser. Loaded this page up in Chrome and you're right, it's fine. But for laughs: Imgur: The most awesome images on the Internet

I wouldn't worry about it, I use a pretty niche browser pretty much nobody else does (Pale Moon).

Well, I intend to include plain text versions for such things anyways when I put it to use, so there is that. That said, the friend who also had the problem tried it in Firefox and IE and had just the same problem as you. But not gonna worry too much about it. Thanks for your help again!

 

[Vars]

In that case, the problem is probably with Iwaku and the forum software not auto-scaling images within tables properly. Tables is the only time I've seen this sort of thing happen. I wish vertical-alignment would work for divs. Oh well.