If you look here , you will see upon loading the page there is

Question

0

Asked: May 25, 20262026-05-25T03:10:51+00:00 2026-05-25T03:10:51+00:00

If you look here , you will see upon loading the page there is

0

If you look here, you will see upon loading the page there is a DIV at the top. It is called “content” with “content_container” wrapped around it and finally, “page” around that. If you click the bottom left or right arrows you will see other DIVs with the same tags but they are properly vertically aligned. The closest I got to maybe fixing it is when I inspected the first carousel element (the one at the top) and saw it was indeed height:100%; like it should. However, if you go to the right or left and inspect the other DIVs they also have height:100%; When you uncheck height:100%; the DIV moves to the top. The only idea I have is that perhaps another DIV around page isn’t letting “page” become height:100% when first loading the page. Other than that I’m 100% lost.

You CANNOT look in the source code because with Tumblr themes you are creating the code separate for each post, so if you look at the source code from your perspective the code is not what it looks like on my end. The entire themes code is below: P.S: Text and Quote posts are the only posts that are vertically aligned, so please look at those. I’m posting the entire code incase I have made a mistake that prevents height:100%; from loading.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<!-- Created by roseanneconner, powered by Tumblr. -->

<title>Earl Larson</title>

<link rel="stylesheet" href="http://static.tumblr.com/ux4v5bf/Btelpy2ff/fortheweb.css"    
type="text/css" charset="utf-8" /> 

<link rel="stylesheet" type="text/css" media="screen"  
href="http://jquery.malsup.com/cycle/cycle.css" />

<style type="text/css">

html {
height: 100%;
}

body {
height:100%;
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif;
background:#FFF url('') no-repeat center center fixed;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}

.holder {
height:100%;
margin:auto;
}

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

td a {
margin: 5px;
}

a {
text-decoration:none;
}

#page{height:100%;display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/ 

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

#page{height:100%;width:465px; font-size:13px; line-height:15px;}
#content_container{display:table-cell;vertical-align: middle;}
#content{ border:1px solid #666; padding:10px; padding-top:0px;}

#page li {
list-style:none;
border:1px solid #000;
padding:5px;
padding-top:3px;
padding-left:6px;
margin-bottom:-1px;
}

#page a {
display:inline-table;
height:19px;
margin-bottom:-3px;
}

#page a:hover {
border-bottom:1px solid #000;
height:18px;
}

#page h1 {
padding-top:6px;
padding-bottom:3px;
}

.photo {
position:relative;
overflow: hidden;
width: 620px;
height: 451px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#photo {
max-width:550px;
max-height:510px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.caption {
position:absolute;
right:12px;
margin-top:20px;
margin-bottom:-10px;
background:#9dc6e8 url('http://static.tumblr.com/ux4v5bf/6frlk3kr0/top.png') no-repeat;
padding:3px;
padding-top:1px;
padding-right:10px;
padding-left:7px;
padding-bottom:6px;
width:150px;
text-align:left;
font-size:11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

#bottom {
margin-top:6px;
margin-bottom:-20px;
}

p {margin: 5px 0 0 0;}

h1, h1, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
font-size:20px;
line-height:20px;
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

blockquote {
margin: 5px 0 0 0;
padding: 0 0 0 8px;
border-left: 2px solid #676d72;
}

blockquote img {
max-height: 100px!important;
max-width: 50px!important;
}

.caption {
position:absolute;
}

#curveLeft {
position:absolute;
margin-top:-3px;
margin-left:-1px;
margin-bottom:-9px;
}

#curveRight {
margin-top:-3px;
margin-left:-9px;
margin-bottom:-9px;
}

#heart {
margin-bottom:-4px;
padding-left:3px;
}

.date {
position:absolute;
bottom:0;
right:0;
padding:11px;
padding-top:10px;
padding-right:10px;
width:100%;
}

.info {
float:right;
font-size:11px;
font-weight:bold;
}

#clock {
margin-bottom:-4px;
padding-left:3px;
}

.nav {
position:absolute;
bottom:-4px;
left:9px;
z-index:5;
}

.next2 {
z-index:2;
margin-left:20px;
}

.prev2 {
z-index:2;
}

.next2 img, .prev2 img {

}

.tags {
position:absolute;
bottom:6px;
margin-left:100px;
font-size:13px;
}

.tags a {
color:#000;
}

.tag {
display:inline-block;
padding:4px;
padding-left:9px;
padding-right:9px;
padding-top:0px;
border:2px solid #000;
margin:0 0 0 9px;
}

.tag:hover {
background:#000;
}

.tag a:hover {
color:#FFF;
}

.audio {
position:absolute;
left:30%;
top:20%;
color:#FFF;
}

#albumArt {
position:absolute;
}

#albumNone {
position:absolute;
}

#albumArt img {
display:block;
width:350px;
height:350px;
}

#albumArtBack img {
display:block;
width:350px;
height:350px;
margin-top:-1px;
}

#albumArtBack {
position:absolute;
margin-left:-8px;
margin-top:0px;
z-index:-1;
}

#albumArtBack img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
opacity:0.2;filter:alpha(opacity=20)
}

.audioHolder {
position:absolute;
width:100%;
height:390px;
}

.audioBox {
position:absolute;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
font-size:14px;
bottom:169px;
margin-left:-31px;
}

@-moz-document url-prefix() {
.audioBox {
bottom:169px;
margin-left:-31px;
}

#song {
margin-left:30px;
}
}

.boxify {
margin:0 0 10px 0;
float:left;
bottom:0;
width:329px;
overflow:hidden;
}

.box {
display:inline-block;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat; 
padding:8px;
padding-left:7px;
padding-right:8px;
padding-top:2px;
}

#song {
margin-left:30px;
}

.playerHolder {
height:11px;
width:5px;
overflow:hidden;
bottom:51px;
margin-left:115px;
float:left;
position:absolute;
z-index:3;
}

.player {
margin-top:-8px;
margin-left:-13px;
overflow:hidden;
}

#audioBubble {
position:absolute;
width:25px;
height:25px;
left:0px;
margin-top:10px;
z-index:5;
padding-bottom:1px;
padding-left:1px;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat;
}

#nav-list-example {
margin-left:60px;
list-style:none;
margin-top:0px;
}

#nav-list-example li {
width: 350px;
height: 350px;
float: left;
position: relative;
}

#nav-list-example li div {
width: 345px;
height: 345px;
}

#nav-list-example li div.back {
text-align:justify;
width:334px;
height:341px;
padding:8px;
padding-top:1px;
background:#EEE;
z-index:2;
}

</style>

<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">    
</script>
<script type="text/javascript" 
src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"> 
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({ 
fx: 'scrollRight',
speed: 400,
timeout: 0,
next: '#next2',
prev: '#prev2',
easing: 'easeinout'
});

function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log(  $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
    .append('<h3>' + this.alt + '</h3>');
}
</script>

<script type="text/javascript" src="http://www.zachstronaut.com/js/base.js"></script> 
<script type="text/javascript" src="http://www.zachstronaut.com/js/rotate3di.js"> 
</script> 

<script type="text/javascript" language="javascript" charset="utf-8"> 
$(document).ready(function () {
$('#nav-list-example li div.back').hide().css('left', 0);

function mySideChange(front) {
    if (front) {
        $(this).parent().find('div.front').show();
        $(this).parent().find('div.back').hide();

    } else {
        $(this).parent().find('div.front').hide();
        $(this).parent().find('div.back').show();
    }
}

$('#nav-list-example li').hover(
    function () {
        $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise',    
sideChange: mySideChange});
    },
    function () {
        $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
    }
);
});
</script> 


</head> 

 <body>

<div class="nav">
<a class="prev2" id="prev2" href="#"><img    
src="http://static.tumblr.com/ux4v5bf/Uzmlqczfp/left.png"></a>
<a class="next2" id="next2" href="#"><img  
src="http://static.tumblr.com/ux4v5bf/wfqlqczes/right.png"></a>
</div>


<div class="holder">
    <div id="s7" style="height:100%;">

        {block:Posts}
        <div id="posts">
            {block:Text} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {block:Title}<h1>{Title}</h1>{/block:Title}
                    {Body}
    </div>
</div>
</div>
            {/block:Text}

            {block:Photo}
                    <div class="photo">
                    {block:Caption}
                    <div class="caption">
                    {Caption}
                    <img id="bottom"  
src="http://static.tumblr.com/ux4v5bf/0eNlk3m67/bottom.png">
                    </div>
                    {/block:Caption}
                    <img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
                    </div>
            {/block:Photo}

            {block:Quote} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {Quote}
                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
    </div>
</div>
</div>
            {/block:Quote}

            {block:Link}
                    <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
            {/block:Link}

            {block:Chat}

                    {block:Title}
                        <h1><a href="{Permalink}">{Title}</a></h1>
                    {/block:Title}

                        {block:Lines}
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}

                                {Line}
                        {/block:Lines}
            {/block:Chat}

            {block:Video}
                    <div class="video">{Video-500}</div>

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
            {/block:Video}

            {block:Audio} <div class="audio">
<div class="audioHolder">
<div class="audioBox">

<div class="boxify">
<img id="audioBubble" src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">
</div>

<div class="boxify">
{block:TrackName}
<span class="box" id="song">{TrackName}</span>
{/block:TrackName}
</div>

<div class="boxify">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify">
{block:ExternalAudio}
<span class="box">
<a href="{ExternalAudioURL}">Download</a>
</span>
{/block:ExternalAudio}
</div>

</div>

                    <div class="playerHolder"><div class="player">{AudioPlayerBlack}   
</div> 

</div>


</div>

<ul id="nav-list-example"> 
<li> 
    <div class="front">
<div id="albumNone"><img src="http://static.tumblr.com/ctwb3zj/0Cflqdl2m/poison.png">   
</div>
            {block:AlbumArt}<div id="albumArt"><img src="{AlbumArtURL}"></div>   
{/block:AlbumArt}
    </div> 
    <div class="back">
            {block:AlbumArt}<div id="albumArtBack"><img src="{AlbumArtURL}"></div>  
{/block:AlbumArt}
            <p>{block:Caption}{Caption}{/block:Caption}</p></div> 
</li> 
</ul> 
</div>
            {/block:Audio}

<div class="date">

<div class="tags">
{block:HasTags}{block:Tags}<span class="tag"><a href="{TagURL}">{Tag}</a></span>   
{/block:Tags}{/block:HasTags}
</div>

<div class="info">
{block:NoteCount}{NoteCount} <img id="heart"    
src="http://static.tumblr.com/ux4v5bf/gWmlq420u/heart.png">{/block:NoteCount}
&nbsp;&nbsp;&nbsp;
{block:Date}{MonthNumber} {DayOfMonth} {ShortYear} <img id="clock"    
src="http://static.tumblr.com/ux4v5bf/K5Xlqb2h4/clock.png">{/block:Date}</div> 
</div>  

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

</div>   

 </body>

<script type="text/javascript">_popupControl();</script>
 </html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-25T03:10:51+00:00

Found it!

Where you’ve set

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

replace it with:

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}
#posts{height:100%;margin:0 auto;width:100%; }

And you’re good to go.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

If you look here , you will see upon loading the page there is

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply