Long Text Posts Overflowing [tumblr] Options

[radioinvader]

I got a custom theme, and thus far I've been able to suffer through the coding to tweak for my liking. However, I've discovered that once a text post gets past about 4 or 5 people, the post will start completely breaking the borders, and the usernames will all squish together like they are constrained, even though it still has post width. Is there any way to fix this code so that long text posts resize and don't start breaking themselves?

This is what a long text post on my blog looks like: http://justanotheregalitarian.tumblr.com/p...ow-tall-are-you
This is the exact same post on my friend's blog, and what I ideally would like mine to look like: http://privilegedlittlecunt.tumblr.com/pos...ow-tall-are-you

This is the coding I have to work with, and I can't figure out what defines the post confinements:

<style type="text/css">
::-webkit-scrollbar-track {background-color:{color:background};}
::-webkit-scrollbar-thumb {background-color:{color:background}; border: 1px solid {color:borders};}
::-webkit-scrollbar {width:7px;height:5px;}

body {
background:{color:background};
background-image: url(http://i.imgur.com/VsGAT6h.png);
background-attachment: fixed;
background-repeat: repeat;
margin:0px;
color:{color:text};
font-family:Calibri;
letter-spacing: 1px;
font-size:12px;
line-height:130%;
word-wrap:break-word;
}

a {
color:{color:link};
text-decoration: none;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

a:hover {
color: {color:link hover};
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

b {
color: {color:bold};
}

img {
border:none;
}

blockquote {
padding-left:5px;
border-left:2px solid {color:borders};
}

img {max-width: 100%};

.quote {
font-size: 16px;
font-family: georgia;
font-weight: lighter;
font-style: italic;
}

#rightbar {
position: fixed;
bottom: 0px;
left: 1100px;
background-color: rgba(0,0,0,0.2);
border-left: 1px solid {color:borders};
width: 100%;
height: 100%;
z-index: -1;
}

#rightline {
top: 0px;
left: 1090px;
width: 0px;
height: 100%;
border-right: 10px solid {color:posts background};
position: fixed;
}

#entries {
padding:10px;
width:690px;
margin-left:360px;
margin-top:0px;
}

#post {
width:650px;
padding: 10px;
margin: 10px;
color:{color:text};
background-color: {color:posts background};
font-weight: lighter;
}

/* BW Posts thanks to a--themes! */
.photo{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.photo:hover{
opacity: 0.7;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#bg1 {
background-image: url({image:bg1});
left: 0px;
top: 0px;
width: 330px;
height: 100%;
border-right: 1px solid {color:borders};
position: fixed;
z-index: -2;
}

#blogtitle {
width: 110px;
border-left: 10px solid {color:borders};
color: {color:blog titles};
text-transform:uppercase;
font-weight: bold;
font-size: 20px;
letter-spacing: -1px;
position: fixed;
top: 160px;
left: 1102px;
}

#sidebar {
width:250px;
position:fixed;
margin-left:50px;
margin-top:150px;
}

#leftline {
top: 0px;
left: 331px;
width: 0px;
height: 100%;
border-right: 10px solid {color:posts background};
position: fixed;
}

#image1 {
width: 250px;
height: 180px;
margin-bottom: 2px;
}

#description {
padding:5px;
text-align: justify;
line-height: 120%;
width: 240px;
height: 110px;
margin-top: 10px;
overflow-y:scroll;
background-color: {color:sbarbg};
border-bottom: 5px solid {color:sbarbg};
}

#linkies {
margin-top: 4px;
margin-bottom: 6px;
width: 352px;
}

#linkies a{
background-color: {color:link background};
display: inline-block;
padding: 5px;
width: 68px;
font-size: 8px;
font-family: sans-serif;
text-align: center;
margin: 2px;
letter-spacing: 2px;
text-transform: uppercase;
color: {color:navigation};
}

#linkies a:hover {
background-color: transparent;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#extras {
top: 220px;
left: 1100px;
width: 120px;
position:fixed;
}

#extras a{
background-color: {color:link background};
display: block;
padding: 5px 2px 5px 2px;
width: 110px;
font-size: 8px;
font-family: sans-serif;
text-align: center;
margin: 2px;
letter-spacing: 2px;
text-transform: uppercase;
border-left: 10px solid {color:borders};
color: {color:navigation};
}

#extras a:hover {
padding-right: 50px;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}


#pagination {
font-size:11px;
text-align:center;
margin-top: 5px;
color: {color:link hover};
}

#info {
text-align:center;
color: {color:info};
text-transform: uppercase;
font-size: 8px;
font-family: sans-serif;
line-height: 9px;
letter-spacing: 2px;
margin-top:10px;
background-color: {color:info background};
border-top: 1px solid {color:borders};
padding: 5px;
}


{CustomCSS}</style></head><body>
<div id="bg1"></div>

<div id="line01"></div>
<div id="line02"></div>
<div id="rightbar"></div>
<div id="rightline"></div>
<div id="leftline"></div>

<img style="position:fixed; opacity: 1.0; width: 700px; height: 350px; TOP:610px; LEFT:0px; z-index: 1;" src="http://40.media.tumblr.com/efe5448810800fcc85eedfc8ba751954/tumblr_njz8rwbyXh1qdbj57o3_r2_500.png">

<img style="position:fixed; opacity: 1.0; width: 750px; height: 300px; TOP:680px; LEFT:900px; z-index: 1;" src="http://40.media.tumblr.com/ffbbb8edc2aa1280fb4bd2eb1bbfadfc/tumblr_njz8rwbyXh1qdbj57o2_r2_500.png">

<div id="extras">
<div id="blogtitle">{title}</div>
{block:ifoneextralink} <a href="{text:link 1 url}">{text:link 1 title}</a>{/block:ifoneextralink}
{block:iftwoextralinks} <a href="{text:link 2 url}">{text:link 2 title}</a>{/block:iftwoextralinks}
{block:ifthreeextralinks} <a href="{text:link 3 url}">{text:link 3 title}</a>{/block:ifthreeextralinks}
{block:iffourextralinks} <a href="{text:link 4 url}">{text:link 4 title}</a>{/block:iffourextralinks}
{block:iffiveextralinks} <a href="{text:link 5 url}">{text:link 5 title}</a>{/block:iffiveextralinks}
{block:ifsixextralinks} <a href="{text:link 6 url}">{text:link 6 title}</a>{/block:ifsixextralinks}
{block:ifsevenextralinks} <a href="{text:link 7 url}">{text:link 7 title}</a>{/block:ifsevenextralinks}

</div>
<div id="sidebar">
<div id="linkies">
<a href="/">Home</a>
<a href="/ask">Talk</a>
<a href="/archive">Archive</a>
</div>
<div id="image1"><img src="{image:image1}" style="width: 250px; height: 180px; border-top: 5px solid {color:sbarbg}; border-bottom: 5px solid {color:sbarbg};"></div>
<div id="description">{Description}</div>

<div id="pagination">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
{CurrentPage} of {TotalPages}
{block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}{/block:Pagination}
</div>

</div>

<div id="entries">{block:Posts}<div id="post">

{block:Text}<span style="font-family: impact; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; background-color: {color:sbarbg};">{block:Title}{Title}{/block:Title}</span>{Body}{/block:Text}

{block:Photo}{LinkOpenTag}<div class="photo"><img src="{PhotoURL-500}"></div>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}

{block:Photoset}<div class="photo">{Photoset-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

{block:Quote}<span style="font-family: impact; font-size: 14px;">{Quote}</span><br><center>{block:Source} —{Source}{/block:Source}</center>{/block:Quote}

{block:Link}<span style="font-family: impact; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; background-color: {color:sbarbg};"><a href="{URL}" {Target}>{Name}</a></span>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Chat}{block:Title}<span style="font-family: impact; text-transform: uppercase; letter-spacing: 2px; font-size: 15px; background-color: {color:sbarbg};">{Title}</span>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}

{block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}

{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}

{block:Answer}
<table style="padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}" style="border:5px solid {color:bold};"></td>
<td style="vertical-align:top;"><strong>{Asker} says:</strong> {Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}

<div id="info">
{block:Date}posted {TimeAgo}{/block:Date} with <a href="{Permalink}">
{NoteCountWithLabel}</a><br> {block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>

</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Posts}</div>

<div style="right:5px; bottom: 5px; position:fixed;"><a href="sendoudaiki.co.vu">★</a></div>

This post has been edited by Christian J: Mar 10 2015, 07:40 AM

[Darin McGrew]

When I inspect the elements with Chrome, it looks like the heavily nested quotes are being squeezed by the margins for the blockquote element. The default style sheet for my browser applies a 40px margin on both the left and the right for each blockquote. When you have blockquotes nested 10 deep, each one adds 40px margin on both the left and the right. That's 400px margin on the left, and 400px margin on the right.

Try setting different values for the margins for the blockquote element.

[radioinvader]

When I inspect the elements with Chrome, it looks like the heavily nested quotes are being squeezed by the margins for the blockquote element. The default style sheet for my browser applies a 40px margin on both the left and the right for each blockquote. When you have blockquotes nested 10 deep, each one adds 40px margin on both the left and the right. That's 400px margin on the left, and 400px margin on the right.

Try setting different values for the margins for the blockquote element.

Messing with the block quote element only made the post pop out of the border even more. I tried comparing the theme code of my friend to mine to figure out what made her text posts resize and stay together like that, but it's too complicated :/ I can't seem to figure out how to neaten it up and make it so that everything doesn't all squish and distort.

[pandy]

Your friend's content area is wider, so the quotes can spread out more.

ATM you have 10px left margin and 10px left padding. Remove the padding altogether and it will look as much as your friends layout as your narrower container allows. You could always make the container wider than 540px.