HTML is killing me...

[StoneWolf18]

Alright, I got it to work ONCE but I can't remember how. I got two problems....





1) In the code below, there's this giant obnoxious box because of the way the text is centered. Is there any way to make the text flow from the top?


2) When I type in the source editor, everything is fine. But when I start editing things in the RTE, the boxes won't adhere to the "width" I've set but instead extend out, crushing the other column.


Any help would me more than appreciated! I'll be messing around with div containers in the mean time but I doubt I'll be able to format them the way I would like.




[COLOR= rgb(255, 255, 255)]Through the Woods[/COLOR]




Of all the bad ideas....this had to be the king of them all.

Six college students, specifically roommates who had all chipped in to pay for a less than moderately sized apartment that barely fits the lot of them, were extremely bored two weekends from thanksgiving. And so, what better way to waste some time then to explore a large swath of woodlands not far from their home? There were many tales they had heard about it as children such as fictional beasts revealing themselves by dusk. Even now various corpses would turn up along its outer edges, coated in wounds not even the most advanced coroner could explain. The causes of death never having been determined. And so with cellphones and jackets in hand, they embark into a late autumn afternoon. Only lose their way in a seemingly endless maze of pathways.

The outcome?

It's not that hard to guess the torture that would soon be to follow. 



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempus ut nisl dictum euismod. Phasellus eu metus sem. Nullam mauris metus, efficitur ultricies velit at, iaculis sagittis tellus. In ornare pharetra turpis vel rhoncus. Vestibulum diam lectus, pretium at varius non, molestie sed leo. Aenean tempor eleifend massa, quis mattis tellus fermentum eget. Mauris at arcu quam. Aliquam id ipsum enim. Duis et scelerisque ligula. Suspendisse porttitor urna quis suscipit varius. Sed porta metus orci, imperdiet vehicula nisl dignissim eget. Curabitur eget molestie metus. Sed in lectus velit. Phasellus sagittis ligula nec magna dictum ultrices. Aenean consectetur eleifend posuere. Curabitur gravida erat sodales, condimentum quam euismod, accumsan nulla. Sed pellentesque elit neque, et pharetra mi viverra id. Nullam in mi et mi finibus luctus. Aliquam vitae lectus euismod, gravida mauris eu, lacinia nulla. Ut auctor leo vulputate, ullamcorper magna sit amet, consectetur lectus. Nam dictum porta tristique. Quisque id luctus ante, non aliquet quam. Nunc cursus, nisl ac convallis laoreet, magna eros maximus arcu, eu vehicula nulla nibh sit amet orci. Quisque sit amet ligula orci. Phasellus et dolor augue. Ut vitae nunc eu massa semper accumsan. Duis pretium ante libero, ac cursus neque viverra et. Etiam ut vestibulum est, nec aliquet purus. Vivamus quis sapien elit. Nullam laoreet in ipsum id egestas. Phasellus vel nulla ac dolor auctor facilisis ac nec elit. Etiam luctus, eros in tempus tempus, turpis velit aliquet sapien, a interdum ante ex eget urna. Pellentesque porttitor commodo ipsum, et tincidunt dui efficitur vel. Praesent lectus dui, finibus at dignissim aliquet, pharetra non mi. Praesent eleifend et turpis quis tempus. Mauris purus sapien, facilisis varius est ac, suscipit consectetur magna. Sed porttitor augue sed posuere laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed tincidunt mi, eget iaculis felis. Duis nulla lorem, laoreet vel quam eget, varius commodo lacus. In ac quam sit amet lectus finibus euismod a eget arcu. Praesent id dignissim mauris, in consequat arcu. Praesent orci felis, ullamcorper ac tellus eu, sagittis auctor leo. Curabitur sagittis nunc elit, a laoreet tellus euismod eget. Nulla pellentesque finibus orci, quis vulputate mi ultrices in. Praesent maximus fermentum porttitor. Praesent ex risus, vestibulum sed turpis et, tempus pharetra leo. Cras ullamcorper odio sit amet mauris luctus molestie. In enim orci, consectetur quis hendrerit porttitor, ornare eget ligula. Aliquam at nibh eget diam volutpat finibus. Mauris vel tincidunt erat, in facilisis nisl. Pellentesque in risus ut leo dictum consequat. Curabitur sed faucibus libero, et vehicula quam. Donec pharetra magna ut elit sodales, sit amet eleifend ante pretium. Cras tristique lectus id aliquet lacinia. Proin sit amet volutpat nunc. Nunc tincidunt eros sit amet finibus dictum. Morbi interdum pharetra mi, ac commodo risus molestie in. Donec est tortor, euismod dictum consequat eu, lacinia tempor libero.

<div style="border: black solid 15px; width: 1000px; height: 800px; margin: auto; background-image: url('http://sdeerwallpaper.com/Cool-Wallpapers/dark-forest-wallpapers-hd-resolution-Is-Cool-Wallpapers.jpg');padding: 30px;">
<div style="background-color: black; padding: 20px; overflow: auto; height: 710px; width: 910px; border: 1px solid white; text-align: center;">
<p><span style="color: rgb(255, 255, 255);font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 40px;">Through the Woods</span></p>

<p> </p>

<hr style="font-family: Papyrus, fantasy; border: 1px solid white;" />
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width 910px;">
	<tbody>
		<tr>
			<td style="width: 455px;"><span style="color: rgb(255, 255, 255); font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 18px; background-color: rgb(0, 0, 0); width: 455px;">Of all the bad ideas....this had to be the king of them all.<br />
			<br />
			Six college students, specifically roommates who had all chipped in to pay for a less than moderately sized apartment that barely fits the lot of them, were extremely bored two weekends from thanksgiving. And so, what better way to waste some time then to explore a large swath of woodlands not far from their home? There were many tales they had heard about it as children such as fictional beasts revealing themselves by dusk. Even now various corpses would turn up along its outer edges, coated in wounds not even the most advanced coroner could explain. The causes of death never having been determined. And so with cellphones and jackets in hand, they embark into a late autumn afternoon. Only lose their way in a seemingly endless maze of pathways.<br />
			<br />
			The outcome?<br />
			<br />
			It's not that hard to guess the torture that would soon be to follow. </span></td>
			<td style="width: 455px;">
			<p><span style="color: rgb(255, 255, 255); font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 18px; background-color: rgb(0, 0, 0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempus ut nisl dictum euismod. Phasellus eu metus sem. Nullam mauris metus, efficitur ultricies velit at, iaculis sagittis tellus. In ornare pharetra turpis vel rhoncus. Vestibulum diam lectus, pretium at varius non, molestie sed leo. Aenean tempor eleifend massa, quis mattis tellus fermentum eget. Mauris at arcu quam. Aliquam id ipsum enim. Duis et scelerisque ligula. Suspendisse porttitor urna quis suscipit varius. Sed porta metus orci, imperdiet vehicula nisl dignissim eget. Curabitur eget molestie metus. Sed in lectus velit. Phasellus sagittis ligula nec magna dictum ultrices. Aenean consectetur eleifend posuere. Curabitur gravida erat sodales, condimentum quam euismod, accumsan nulla. Sed pellentesque elit neque, et pharetra mi viverra id. Nullam in mi et mi finibus luctus. Aliquam vitae lectus euismod, gravida mauris eu, lacinia nulla. Ut auctor leo vulputate, ullamcorper magna sit amet, consectetur lectus. Nam dictum porta tristique. Quisque id luctus ante, non aliquet quam. Nunc cursus, nisl ac convallis laoreet, magna eros maximus arcu, eu vehicula nulla nibh sit amet orci. Quisque sit amet ligula orci. Phasellus et dolor augue. Ut vitae nunc eu massa semper accumsan. Duis pretium ante libero, ac cursus neque viverra et. Etiam ut vestibulum est, nec aliquet purus. Vivamus quis sapien elit. Nullam laoreet in ipsum id egestas. Phasellus vel nulla ac dolor auctor facilisis ac nec elit. Etiam luctus, eros in tempus tempus, turpis velit aliquet sapien, a interdum ante ex eget urna. Pellentesque porttitor commodo ipsum, et tincidunt dui efficitur vel. Praesent lectus dui, finibus at dignissim aliquet, pharetra non mi. Praesent eleifend et turpis quis tempus. Mauris purus sapien, facilisis varius est ac, suscipit consectetur magna. Sed porttitor augue sed posuere laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed tincidunt mi, eget iaculis felis. Duis nulla lorem, laoreet vel quam eget, varius commodo lacus. In ac quam sit amet lectus finibus euismod a eget arcu. Praesent id dignissim mauris, in consequat arcu. Praesent orci felis, ullamcorper ac tellus eu, sagittis auctor leo. Curabitur sagittis nunc elit, a laoreet tellus euismod eget. Nulla pellentesque finibus orci, quis vulputate mi ultrices in. Praesent maximus fermentum porttitor. Praesent ex risus, vestibulum sed turpis et, tempus pharetra leo. Cras ullamcorper odio sit amet mauris luctus molestie. In enim orci, consectetur quis hendrerit porttitor, ornare eget ligula. Aliquam at nibh eget diam volutpat finibus. Mauris vel tincidunt erat, in facilisis nisl. Pellentesque in risus ut leo dictum consequat. Curabitur sed faucibus libero, et vehicula quam. Donec pharetra magna ut elit sodales, sit amet eleifend ante pretium. Cras tristique lectus id aliquet lacinia. Proin sit amet volutpat nunc. Nunc tincidunt eros sit amet finibus dictum. Morbi interdum pharetra mi, ac commodo risus molestie in. Donec est tortor, euismod dictum consequat eu, lacinia tempor libero.</span></p>
			</td>
		</tr>
	</tbody>
</table>
</div>
</div>

 

[The Mechanist]

Holy that's a lot of stuff 

 

[Dusky]

1) You want the vertical-align property in this case, but really you want to not use a table for formatting unless it's absolutely unavoidable. Use divs - you can specify percentages as widths and you can use the float property to set them next to each other.


2) I'm reasonably certain that's got to do with you using tables instead of divs.


Also please use max-width or percentages where possible! Your content extends outside your post area, which is a big no no.

 

[StoneWolf18]

1) You want the vertical-align property in this case, but really you want to not use a table for formatting unless it's absolutely unavoidable. Use divs - you can specify percentages as widths and you can use the float property to set them next to each other.


2) I'm reasonably certain that's got to do with you using tables instead of divs.


Also please use max-width or percentages where possible! Your content extends outside your post area, which is a big no no.

Alright. I got the divs to work up until they needed to be right next to each other. Then I was stumped.


 And I formatted this on a computer so it shouldn't go over? I'm on mobile now and it does but I wasn't aware there was a way to allow the site to alter that automatically. (Most HTML in my experience isn't mobile friendly.)


Anyway, thanks for the help! ^^

 

[Kaerri]

What happens (as I understand it) is that when someone copy/pastes spoilers and other boxes, it brings with it the width of the copied post and uses it as a set width.  This means the person who copy/pasted won't notice, unless they preview their post and check on smaller screens, but anyone who is on a smaller screen will see that box extending past the margin of the post and out the side of the page.  It's not necessarily something you coded in, but it's something in the code regardless.


Set widths are, well, set; they're static and don't adjust to screen/window size.  That means if it has a set width of 5000 pixels (just a random example, I've no idea what yours is set at), it's going to be 5000 pixels wide regardless of the size of the viewer's screen.

 

[StoneWolf18]

What happens (as I understand it) is that when someone copy/pastes spoilers and other boxes, it brings with it the width of the copied post and uses it as a set width.  This means the person who copy/pasted won't notice, unless they preview their post and check on smaller screens, but anyone who is on a smaller screen will see that box extending past the margin of the post and out the side of the page.  It's not necessarily something you coded in, but it's something in the code regardless.


Set widths are, well, set; they're static and don't adjust to screen/window size.  That means if it has a set width of 5000 pixels (just a random example, I've no idea what yours is set at), it's going to be 5000 pixels wide regardless of the size of the viewer's screen.

Ah, alright. Guess I'll have to quit using set widths.

 

[Dusky]

If you use max-width, it will never be bigger than that, but if the area is smaller than the max-width you've set, it will simply take up 100% of the width. ovo-b