Search code examples
htmlcssthemeswrappertumblr

Posts go out of wrapper

I'm making a Tumblr theme and the posts keep going out of the boundary I set for my wrapper. The first couple of posts will adhere to it, but after those, the subsequent ones break away as if they are not wrapped by the div at all. Please help me.

Here is a picture: http://postimg.org/image/klkyjsesh/

Here is part of my code:

	#contentarea {
	    margin-top: 80px;
        width:400px;
	    margin-left: auto;
        margin-right: auto;
        min-height: 100%;
        

	}
	
	.entrygroup {
	    width: 400px;
	    margin-bottom: 10px;
    	background: #fcfcfc;
		margin-left: 8px;
		margin-right: 8px;
		padding: 10px;
		padding-bottom: 30px;
		border-radius: 8px;
		display: block;
		
		
	}
<div id="contentarea">	
<div class="autopagerize_page_element">	
{block:Posts}
    <div class="entrygroup">
		{block:Text}
			<div class="entry">	
		<div class="textpost">
			{block:Title}
				<h3>
					<a href="{Permalink}" style="color: 

black">{Title}</a>
				</h3>
			{/block:Title}
			{Body}
		</div>
		    <ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
		</div>
		{/block:Text}


		{block:Photo} <div class="entry">
		<div class="photopost">	
			<img src="{PhotoURL-400}">
			{block:Caption}{Caption}{/block:Caption}
		</div>
		    <ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
		</div>
		{/block:Photo}
		
		
	
		{block:Photoset} <div class="entry">	
		    <div class="photosetpost">	
			{Photoset-400}
			{block:Caption}{Caption}{/block:Caption}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

</div></div>
		{/block:Photoset}


		{block:Quote}<div class="entry">
		<div class="quotepost">
			{Quote}
	   	{block:Source}<div class="quotesource"><br>&mdash;{Source}

</div>{/block:Source}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

</div></div>
		{/block:Quote}


		{block:Link}<div class="entry">
		<div class="linkpost">
  			<a href="{URL}" {Target} style="color: black">
{Name}</a>
  			{block:Description}{Description}
{/block:Description}
		</div>
		<ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}
#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">
{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}
</div></div>
		{/block:Link}


		{block:Chat}<div class="entry">
		<div class="chatpost">
			{block:Title}{Title}{/block:Title}
			<table>
				{block:Lines}
				<tr>
					<th>{block:Label}{Label}

{/block:Label}</th>
					<td>{Line}</td>
				</tr>
				{/block:Lines}
			</table>
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

</div></div>
		{/block:Chat}


		{block:Audio}<div class="entry">
		<div class="audiopost">
			{AudioPlayer}
      	{block:Caption}{Caption}{/block:Caption}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

</div></div>
		{/block:Audio}


		{block:Video}<div class="entry">
		<div class="videopost">
			{Video-500}
			{block:Caption}{Caption}{/block:Caption}
		</div><ul class="like-reblog">
				<li>{LikeButton size="15"}</li>
				<li>{ReblogButton size="15"}</li>
				<li>{block:NoteCount}<a href="{permalink}

#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
				<li>{block:Date}<a href="{Permalink}">

{TimeAgo}</a>{/block:Date}</li>
			</ul>
		    {block:PostNotes}{PostNotes}{/block:PostNotes}

</div></div>
		{/block:Video}


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

Solution

  • Problem is in you HTML code you close div on wrong place.

    <div id="contentarea">  
    <div class="autopagerize_page_element"> 
    {block:Posts}
        <div class="entrygroup">
            {block:Text}
                <div class="entry"> 
                    <div class="textpost">
                    {block:Title}
                        <h3>
                            <a href="{Permalink}" style="color: black">{Title}</a>
                        </h3>
                    {/block:Title}
                    {Body}
                    </div>
                    <ul class="like-reblog">
                        <li>{LikeButton size="15"}</li>
                        <li>{ReblogButton size="15"}</li>
                        <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                        <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                    </ul>
                    {block:PostNotes}{PostNotes}{/block:PostNotes}
                </div>
        </div>
        {/block:Text}


        {block:Photo}
        <div class="entry">
            <div class="photopost"> 
                <img src="{PhotoURL-400}">
                {block:Caption}{Caption}{/block:Caption}
            </div>
                <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Photo}
            {block:Photoset} 
        <div class="entry">    
            <div class="photosetpost">  
            {Photoset-400}
            {block:Caption}{Caption}{/block:Caption}
            </div>
            <ul class="like-reblog">
                <li>{LikeButton size="15"}</li>
                <li>{ReblogButton size="15"}</li>
                <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
            </ul>
            {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Photoset}
            {block:Quote}
        <div class="entry">
            <div class="quotepost">
                {Quote}
                {block:Source}<div class="quotesource"><br>&mdash;{Source}</div>
                {/block:Source}
            </div>
            <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Quote}
            {block:Link}
        <div class="entry">
            <div class="linkpost">
                <a href="{URL}" {Target} style="color: black">{Name}</a>
                {block:Description}{Description}{/block:Description}
            </div>
                <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Link}
            {block:Chat}
        <div class="entry">
            <div class="chatpost">
                {block:Title}{Title}{/block:Title}
                <table>
                    {block:Lines}
                    <tr>
                        <td>{block:Label}{Label}{/block:Label}</td>
                        <td>{Line}</td>
                    </tr>
                    {/block:Lines}
                </table>
            </div>
                <ul class="like-reblog">
                    <li>{LikeButton size="15"}</li>
                    <li>{ReblogButton size="15"}</li>
                    <li>{block:NoteCount}<a href="{permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                    <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
                </ul>
                {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Chat}
            {block:Audio}
        <div class="entry">
            <div class="audiopost">
                {AudioPlayer}
            {block:Caption}{Caption}{/block:Caption}
            </div>
            <ul class="like-reblog">
                <li>{LikeButton size="15"}</li>
                <li>{ReblogButton size="15"}</li>
                <li>{block:NoteCount}<a href="{permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
            </ul>
            {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Audio}
            {block:Video}
        <div class="entry">
            <div class="videopost">
                {Video-500}
                {block:Caption}{Caption}{/block:Caption}
            </div>
            <ul class="like-reblog">
                <li>{LikeButton size="15"}</li>
                <li>{ReblogButton size="15"}</li>
                <li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
                <li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
            </ul>
              {block:PostNotes}{PostNotes}{/block:PostNotes}
        </div>
            {/block:Video}
    </div>
        {/block:Posts}
</div>

    You should try this,

    I hope it will helps you.