Can't get this darn image to float (tumblr theme)

skyyaa · 04-22-2012, 07:38 PM

Hi Guys,
I've been trying forever to figure out why I have this blank space above the start of the body container in this custom tumblr. As best I can tell, it's because the image on the left isn't floated properly, so the body container div is starting just below it.

Any ideas on how to remedy this? Theme below (originally adapted from Drifter Version 2.0). Thanks!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">



<html>
    <head>
        <!--
                Adapted from Drifter Version 2.0 (jon@fridayface.com) by Schuyler Null
                -->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="color:Highlight" content="#ffffff" />
                <meta name="image:Header" content="0" />
                <meta name="if:Larger Type" content="0"/>
                <meta name="if:Sidebar fixes at top" content="1"/>
                <meta name="if:Endless Scrolling" content="1"/>
                <meta name="if:Show Date" content="0"/>
                <meta name="if:Show Tags" content="0"/>
                <meta name="image:BackgroundImage" content="http://static.tumblr.com/ybdgkw4/ffzkxsss6/bg-400-paper2.jpg"/>

        <title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
        <meta name="description" content="{MetaDescription}"/>
        <link rel="shortcut icon" href="{Favicon}"/>
  		<link rel="alternate" type="application/rss+xml" name="RSS" href="{RSS}"/>
		<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		{block:IfSidebarfixesattop}
		<script type="text/javascript" src="http://static.tumblr.com/ahomusb/aIHl5l1tn/fixedsidebar.js"></script>
		{/block:IfSidebarfixesattop}

	<style class="text/css">

	body {
		background-color:#f8f8f8;
		background-image:url({image:BackgroundImage});
		margin: 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}

	html {
		{block:IfNotLargerType}
                font: 12px Georgia;
                {/block:IfNotLargerType}
                {block:IfLargerType}
				font: 14px Georgia;
                {/block:IfLargerType}
		color: #000000;	
	}
	
	a {
		color: #6C6C6C;
		text-decoration: underline;
	}
	
	a:hover {
		color: #E80046;     /* Pink highlight on grey background */
		background-color: {color:Highlight};
		text-decoration: none;
	}
	
	#body_container {
		margin-left: auto;
		margin-right: auto;
		width: 700px;
		border: 0px solid #000;
		text-align: left;
	}

	
	#header {
		text-align: right;
		margin-top: 10px;
		width: 700px;
		max-width: 700px;
		padding-top: 40px;  
		/* add visibility: hidden if you want to hide header*/
	}
	
	h1 {
		font-family: 'Bevan', serif;
		letter-spacing: 1px;
		color: #235685;
		width: 700px;
	}
	
	#header a {
		font-family: 'Bevan', serif;
		font-size: 50px;
		color: #235685;
	}
	
	#avatar {
		float: left;
		clear: both;
		padding-top: 50px;
	}
	
	#sidebar {
		float: left;
		clear: both;
		padding-top: 0px;
	}

		{block:IfSidebarfixesattop}
        .fixed {
        	position: fixed;
        	margin-top: 0px;
        	margin-left: 0px;
        }
		{/block:IfSidebarfixesattop}
	
	#sidebar ul {
		margin: 5px 0px 0px 0px; 
		padding: 0px;
		list-style: none;
		text-transform: uppercase;
		font: 11px Trebuchet MS;
	}
	
	#sidebar li {
		padding-top: 5px;
		margin: 0px;
	}
	
	#sidebar li a {
		color: #000;
		text-decoration: none;
	}
	
	#sidebar a:hover {
		text-decoration: none;
		color: #235685;     /* Blue highlight on grey background */
	}

	#desc {
                color: #000;
	}
	
	#desc a {
		color: #000;
		text-decoration: underline;
	}
	
	#desc a:hover {
		color: #000;
		background-color: {color:Highlight};
		text-decoration: none;
	}
	
	#search {
		margin-top: 0px;
	}

        form#search input {
		{block:IfNotLargerType}
                font: 14px Georgia;
                width: 148px;
				background: #235685;
				color: #e6e6e4;
				padding: 2px 2px 2px 6px;
				margin-left: -1em;
				-moz-border-radius: 5px;
				border-radius: 5px;
				border: 0;
        {/block:IfNotLargerType}
        {block:IfLargerType}
				font: 16px Georgia;
                width: 148px;
				background: #235685;
				color: #e6e6e4;
				padding: 2px 2px 2px 6px;
				margin-left: -1em;
				-moz-border-radius: 5px;
				border-radius: 5px;
				border: 0;
        {/block:IfLargerType}
        }

	form#search input:hover {
                background: {color:Highlight};
				color: #235685;
        }

	form#search input:focus {
                background: {color:Highlight};
                width: 148px;
				color: #235685;
        }
	

	#footer{
                color: #6c6c6c;
	}
	
	#footer a {
		color: #6c6c6c;
		text-decoration: underline;
	}
	
	#footer a:hover {
		color: #000;
		background-color: {color:Highlight};
		text-decoration: none;

        }
	
	#post_container {
		margin: 0px;
		float: right;
		width: 520px;
		padding-bottom: 30px;
	}
	
	
	#post {
		width: 500px;
		margin-top: 0px;
		color: #000;
		border-bottom: 1px solid #ccc;
	}
	
	#notes, #notes a {
		margin: 0px;
		color: #6c6c6c;
	}

	#notes a:hover {
		margin: 0px;
		color: #E80046;     /* Pink highlight on grey background */
		text-decoration: none;
	}
	
	h3 {
		font: 26px Trebuchet MS;
		font-weight: bold;
		color: #235685;
		line-height: 1em;
	}
	
	#chat ul {
		list-style: none;
		padding: 0px;
		margin: 0px;
		width: 500px;
		text-align: left;
	}
	
	#chat li {
		padding: 2px;
		background-color: #eee;
		margin-top: 2px;
	}
	
	#notes_page {
		margin-top: 30px;
		color: #000;
	}
	
	#notes_page
		color: #000;
	}
	
	#notes_page a:hover {
		color: {color:Highlight};
	}
	
	#notes_page ol {
		list-style: none;
		padding: 0px;
		margin: 0px;
		width: 500px;
	}
	
	#notes_page li {
		padding: 2px;
		background-color: #fff;
		margin-top: 2px;
	}
	
	#nav {
		width: 500px;
		margin-top: 50px;
		height: 30px;
		line-height: 30px;
		
	}
	
	#nav a {
		text-decoration: none;
		color: #000;
	}
	
	#nav a:hover {
		color: #E80046;
	}
	
	#prev {
		float:left;
	}
	
	#next {
		float:right;
	}

{CustomCSS}
	</style>

{block:IfEndlessScrolling}<script type="text/javascript" 
src="http://static.tumblr.com/q0etgkr/mFbkoqlkr/tumblrautopager.js "></script>{/block:IfEndlessScrolling}

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29036085-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsBy
    Name('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

	</head>
	<body>
	<div id="body_container">
		<div id="header">
        {block:IfHeaderImage}<a style="background-color:transparent" href="/"><img src="{image:Header}"/></a>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<a style="text-decoration: none;" href="http://schuylernull.com/">my web log.</a>{/block:IfNotHeaderImage}
    <script>
        $("h1").contents().stretch();
     </script>	
		</div>
		<div id="avatar">
		<img src="https://lh4.googleusercontent.com/-fnn042d_NcA/T4dBURgnfpI/AAAAAAAADdU/N6dkno5NLNI/s128/avatar.png" style="float: left; clear: both;">
		</div>
		<div id="sidebar">
                <span class="desc">{Description}</span>
			<ul>
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
				<li>{block:SubmissionsEnabled}<a href="/submit">Submit</a>{/block:SubmissionsEnabled}</li>
				<li>{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}</li>
				<li><a href="/archive">Archive</a></li>
				<li><a href="{RSS}">RSS</a></li>
				<li>
		<form action="/search" method="get" id="search">
    		<input type="text" name="q" value="SEARCH" onfocus="value='{searchQuery}'" onblur="value='SEARCH'"/>

                <input type="hidden" value="Search" />
		</form></li>
		
			</ul>
		<span id="footer">
		</span>
		</div>
		
		<div id="post_container">
<div class= "autopagerize_page_element">
			{block:Posts}
			<div id="post">
				{block:Text}                                                
					{block:Title}<h3 style="font-style:italic; font-size: 21px">{Title}</h3>{/block:Title}
					{Body}				
				{/block:Text}
				
				{block:Photo}
					{LinkOpenTag}<img src="{PhotoURL-500}" border="0" alt="{PhotoAlt}">{LinkCloseTag}
					<p>
					{block:Caption}{Caption}{/block:Caption}					
				{/block:Photo}
				
				{block:Photoset}
					{Photoset-500}
					<p>

					{block:Caption}{Caption}{/block:Caption}					
				{/block:Photoset}
				
				{block:Quote}
					<h3 style="font-style:italic; font-size: 21px">“{Quote}”</h3>
					<p>
					{block:Source}{Source}{/block:Source}					
				{/block:Quote}
				
				{block:Link}
					<h3><a href="{URL}" {Target}>{Name}</a></h3>
					<p>
					{block:Description}{Description}{/block:Description}					
				{/block:Link}
			
				{block:Chat}
					{block:Title}<h3>{Title}</h3>{/block:Title}
					<div id="chat">

					<ul>
						{block:Lines}
							<li>
								{block:Label}{Label}{/block:Label}
								{Line}
							</li>
						{/block:Lines}
					</ul>
					</div>
					<p>					
				{/block:Chat}
				
				{block:Audio}
					{block:AlbumArt}<img src="{AlbumArtURL}" style="width:50px;height:50px;float:left;padding-right:10px;padding-bottom:10px;">{/block:AlbumArt}{AudioPlayerGrey}
					<p>

					{Caption}					
				{/block:Audio}
				
				{block:Video}
					{Video-500}
					<p>
					{Caption}					
				{/block:Video}
				
				{block:Answer}
					<h3>{Asker} asked: {Question}</h3>
						{Answer}					
				{/block:Answer}
				
<div id="notes">
					<p>
					{block:Date}{block:IfShowDate}<a href={Permalink}>{DayOfMonth} {ShortMonth} {Year}</a> / {/block:IfShowDate}{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a> with{/block:RebloggedFrom} {block:IfNotShowDate}<a href={Permalink}>{/block:IfNotShowDate}{NoteCountWithLabel}{block:IfNotShowDate}</a>{/block:IfNotShowDate}{block:IfShowTags}
              {block:HasTags} / {block:Tags}<a href={TagUrl}>{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}{/block:IfShowTags}{/block:Date}</div>

			</div>

			{/block:Posts}
</div>
			{block:PermalinkPage}
			<div id="notes_page">
          	{block:PostNotes}
            {PostNotes}
         	 {/block:PostNotes}
			</div>
       		 {/block:PermalinkPage}

<div id="nav">
	<h3>
		<span id="prev">{block:PreviousPage}
                <a href="{PreviousPage}">&larr; NEWER</a>
            {/block:PreviousPage}
		</span>
	</h3>
	<h3>
		<span id="next">
            {block:NextPage}
                <a href="{NextPage}">OLDER &rarr;</a>
            {/block:NextPage}
		</span>
	</h3>
		</div>
		</div>
	</div>
</html>
	</body>

aaronhockey_09 · 04-23-2012, 01:45 AM

I believe it is because you are doing a clear:both on your avatar and sidebar divs.
What might be better wrapping your content simliar to this.

Code:

<div class="container">
<div class="left">
Your avatar and sidebar would go here
</div>
<div class="right">
All your other content would go here. 
</div>
</div>

Where you have the content in a container.
have class left floated left with a specific width
have class right floated right with a specific width.

And this should fix your problem.

I think the only other way would be by not clearing both on avatar and sidebar,

Let me know if this helps at all.

skyyaa · 04-23-2012, 05:58 PM

Genius. The right container already existed essentially w/"post-container," so I just created one for the two elements on the left, removed all the extra clears, and it's working great. Thanks so much! Learning on the fly here...

pilengero · 01-22-2013, 04:26 PM

I have the same problem, thi is the basecode of my theme, I don't know how can I fix this can you help me to?

here's the code: HERE

aaronhockey_09 · 01-22-2013, 10:07 PM

Quote:

Originally Posted by pilengero

I have the same problem, thi is the basecode of my theme, I don't know how can I fix this can you help me to?

here's the code: HERE

do you have a URL i can look at ?