Member Avatar for jie3

Hi guys,

I'm new to the site and could really use some help.

On my site I am having a css issue that I just can't figure out.
On some of my pages, the right side div contents seem to stuck to the left side.

The first link below is how should look, with the 'Latest News', etc... starting at the top right of the page.
From the second link you'll see that the 'Latest News' etc... ends up halfway down the page stuck to the gallery.

I have included the php codes of both the good page and problem page. Any help would be greatly appreciated.

http://oldtowntattoo.co.uk/nick.php
http://oldtowntattoo.co.uk/cecil.php

Good Page:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="description" content="Old Town Tattoo is a tattoo and modification studio based in Edinburgh." />
        <meta name="keywords" content="old, town, tattoo, edinburgh, tattoo, piercing, modification, scotland, edinburgh, artist, old town tattoo" />
        <meta name="Author" content="old town tattoo" />

<title>Old Town Tattoo</title>
<meta content="Old Town Tattoo is a tattoo and modification studio based in Edinburgh." name="description"/> 
<meta content="" name="keywords"/>

<link rel="stylesheet" type="text/css" href="style.css" />


<!--<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Bodoni_BE_italic_500.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('ul#list-nav li a');
			Cufon.replace('ul#sub-list-nav li a');
			Cufon.replace('h1');
			Cufon.replace('h2');
		</script>-->
            
        
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="galleria/src/galleria.js"></script>
        <script src="galleria/src/plugins/galleria.flickr.js"></script>
        
        
        <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17528434-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.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

    





</head>




<body>
<div id="header">
	<div id="logo"><img src="images/OTT-logo1.png" alt="old town tattoo" /></div>
<div class="mainNav">
		<ul id="list-nav">
            <li><a href="index.php">about</a></li>
             <li><img src="images/nav-divider.png" /></li>
			<li><a href="appointments.php">tattooing</a></li>
             <li><img src="images/nav-divider.png" /></li>
			<li><a href="piercing.php">piercing</a></li>
             <li><img src="images/nav-divider.png" /></li>
			<li><a href="modification.php">modification</a></li>
             <li><img src="images/nav-divider.png" /></li>
                        <li><a href="laser.php">laser</a></li>
             <li><img src="images/nav-divider.png" /></li>
                        <li><a href="gallery.php">gallery</a></li>
             <li><img src="images/nav-divider.png" /></li>
                        <li><a href="shop.php">shop</a></li>
             <li><img src="images/nav-divider.png" /></li>
                       <li><a href="convention.php">convention</a></li>
             <li><img src="images/nav-divider.png" /></li>
		       <li><a href="contact.php">contact</a></li>
		</ul>
	</div>
</div>
<div id="contentWrapper">
  
  
  <div id="leftHandColumn">
  <div id="leftHeader"><img src="images/largerHeader-img.png" />
    <div id="title"><h1>tattooing</h1></div>
    	<div class="sub-nav-piercing-tattoo" id="sub-nav-piercing-tattoo">
		  <ul id="sub-list-nav">
					<li><a href="appointments.php">appointments</a></li>
             		<img src="images/nav-divider.png" style="height:8px" />
			<li><a href="nick.php">nick</a></li>
             	 <img src="images/nav-divider.png" style="height:8px"/>		
                        <li><a href="steph.php">steph</a></li>
             		<img src="images/nav-divider.png" style="height:8px" />
					<li><a href="kara.php">kara (apprentice)</a></li>
                        <img src="images/nav-divider.png" style="height:8px" />
					<li><a href="guests.php">guests</a></li>
                        
		  </ul>
   		</div>
  </div>
        
       <div id="leftHand">
         <div id="artistImg"><img src="images/nick.jpg" /></div>
         <div id="artistProfile">
         <h3>Nick</h3>
         <p class="artistProfile">Years Experiences: 13</p>
         <p class="artistProfile">Favourite Artists: Marcus Pacheco</p>
         <p class="artistProfile">Favourite work to do: Cover-ups and custom pieces</p>
         <p class="artistProfile">Favourite Villain: The Joker</p>
         <p class="artistProfile">Favourite Star Wars Character: Boba Fett</p>
         <p class="artistProfile">Contact: nick@oldtowntattoo.co.uk</p>
         </div>
        
    </div>
    	
         	<div id="secondaryHeader"><img src="images/subheader-img.png" />
        	<div id="title"><h2>gallery</h2></div>
     		</div>
            <div id="galleryContent">
               <div id="galleria"></div>

		   <script>
    
    // Load theme
    Galleria.loadTheme('galleria/src/themes/classic/galleria.classic.js');
    
    // intiialize flickr plugin
    var flickr = new Galleria.Flickr('fddd7bc223fe37295faace93a4f2d8fc');
    
    // inject a photset into galleria
    flickr.getSet('72157624723137001', { 
        size: 'medium'
    }, function(data) {
        $('#galleria').galleria({
            data_source:data,
            image_position: 'center',
            image_crop: false
        });
    });
    
    </script>

            </div>
      		
   
    
    </div>
    
  <div id="rightHandColumn">
      
      <div id="rightHeader"><img src="images/subheader-img.png" />
        <div id="title"><h2>latest news</h2></div>
      </div>
        


<div id="tumblr_div">
<?php
$request_url ="http://oldtowntattoo.tumblr.com/api/read?type=post&start=0&num=3";
$xml = simplexml_load_file($request_url);
foreach($xml->posts->post as $thePost)
{
    $title = $thePost->{'regular-title'};
    $post = $thePost->{'regular-body'};
    $link = $thePost['url'];
    $small_post = substr($post,0,100);
    echo '<div><h4>'.$title.'</h4>';
    echo '<p>'.$small_post.'</p>';
    echo "...";
    echo "</br><a target=frame2 href='".$link."'>Read More</a></div>";
}
?>    
</div>
    
    <br /><br /><br /><br />
    
    <div id="rightHeader"><img src="images/subheader-img.png" />
        <div id="title"><h2>opening times</h2></div>
    </div>
    
    <div id="openingTimes">
    	<table width="250" border="0">
  <tr>
    <td>Monday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Tuesday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Wednesday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Thursday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Friday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Saturday:</td>
    <td>10.00 - 19.00</td>
  </tr>
  <tr>
    <td>Sunday:</td>
    <td>11.00 - 17.00</td>
  </tr>
</table>

		
	</div>
    <p class="openingTimes">We recommend you book an appointment in advance. Walk-ins are always welcome, and if we can fit you in on the day, then we will.</p>

  </div>
    
</div>
    
    
    
    
    <div id="footer">
    	<div id="footer-text">
       	  <div id="footer_left">
		</div>
        <div id="footer_right">
			<p class="footer"> FOR BOOKING PLEASE CALL: +44 (0)131 5560345<br />
            49 BLACKFRIARS STREET, EDINBURGH, EH1 1NB
			<a class="footer" href="mailto:enquiries@oldtowntattoo.info">ENQUIRIES@OLDTOWNTATTOO.INFO</a></p></div>
		</div>
    
    </div>
	

</div>




<script type="text/javascript">Cufon.now();</script>




</body>

</html>

Problem Page:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="description" content="Old Town Tattoo is a tattoo and modification studio based in Edinburgh." />
        <meta name="keywords" content="old, town, tattoo, edinburgh, tattoo, piercing, modification, scotland, edinburgh, artist, old town tattoo" />
        <meta name="Author" content="old town tattoo" />

<title>Old Town Tattoo</title>
<meta content="Old Town Tattoo is a tattoo and modification studio based in Edinburgh." name="description"/> 
<meta content="" name="keywords"/>

<link rel="stylesheet" type="text/css" href="style.css" />

<!--<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Bodoni_BE_italic_500.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('ul#list-nav li a');
			Cufon.replace('ul#sub-list-nav li a');
			Cufon.replace('h1');
			Cufon.replace('h2');
		</script>-->
            
        
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="galleria/src/galleria.js"></script>
        <script src="galleria/src/plugins/galleria.flickr.js"></script>
        
        <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17528434-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.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    





</head>




<body>
<div id="header">
	<div id="logo"><img src="images/OTT-logo1.png" alt="old town tattoo" /></div>
<div class="mainNav">
		<ul id="list-nav">
            <li><a href="index.php">about</a></li>
             <li><img src="images/nav-divider.png" /></li>
			<li><a href="appointments.php">tattooing</a></li>
             <li><img src="images/nav-divider.png" /></li>
			<li><a href="piercing.php">piercing</a></li>
             <li><img src="images/nav-divider.png" /></li>
			<li><a href="modification.php">modification</a></li>
             <li><img src="images/nav-divider.png" /></li>
                        <li><a href="laser.php">laser</a></li>
             <li><img src="images/nav-divider.png" /></li>
                        <li><a href="gallery.php">gallery</a></li>
             <li><img src="images/nav-divider.png" /></li>
                        <li><a href="shop.php">shop</a></li>
             <li><img src="images/nav-divider.png" /></li>
                       <li><a href="convention.php">convention</a></li>
             <li><img src="images/nav-divider.png" /></li>
		       <li><a href="contact.php">contact</a></li>
		</ul>
	</div>
</div>
<div id="contentWrapper">
  
  
  <div id="leftHandColumn">
  <div id="leftHeader"><img src="images/largerHeader-img.png" />
    <div id="title"><h1>tattooing</h1></div>
    	<div class="sub-nav-piercing-tattoo" id="sub-nav-piercing-tattoo">
		  <ul id="sub-list-nav">
					<li><a href="appointments.php">appointments</a></li>
             		<img src="images/nav-divider.png" style="height:8px" />
			<li><a href="nick.php">nick</a></li>
             	 <img src="images/nav-divider.png" style="height:8px"/>		
                        <li><a href="steph.php">steph</a></li>
             		<img src="images/nav-divider.png" style="height:8px" />
					<li><a href="kara.php">kara (apprentice)</a></li>
                        <img src="images/nav-divider.png" style="height:8px" />
					<li><a href="guests.php">guests</a></li>
                        
		  </ul>
   		</div>
  </div>
        
       <div id="leftHand">
       
        
    
    	
         	<div id="secondaryHeader"><img src="images/subheader-img.png" />
        	<div id="title"><h2>guests</h2></div>
     		</div>
            <div id="leftContent">
<br />
<div class="sub-nav-piercing-tattoo" id="sub-nav-piercing-tattoo-guests">
		  <ul id="sub-list-nav">
					<center><li><a href="cecil.php">cecil porter</a></li>
             		<img src="images/nav-divider.png" style="height:8px" />
			<li><a href="jim.php">jim miner</a></li>
             	 <img src="images/nav-divider.png" style="height:8px"/>		
                        <li><a href="matt.php">matt shamah</a></li></center>
		  </ul>
   		</div>
            </div>
            
            </div> 
</div>
<div id="secondaryHeader"><img src="images/subheader-img.png" /><br /><center><img src="images/cecilpic.jpg" /></center>
        	<div id="title"><h2>cecil's gallery</h2></div>
     		</div>
            <div id="galleryContent">
               <div id="galleria"></div>

		   <script>
    
    // Load theme
    Galleria.loadTheme('galleria/src/themes/classic/galleria.classic.js');
    
    // intiialize flickr plugin
    var flickr = new Galleria.Flickr('fddd7bc223fe37295faace93a4f2d8fc');
    
    // inject a photset into galleria
    flickr.getSet('72157626956498208', { 
        size: 'medium'
    }, function(data) {
        $('#galleria').galleria({
            data_source:data,
            image_position: 'center',
            image_crop: false
        });
    });
    
    </script>

            
</div>

<br />
  
 <td align=right><div id="rightHandColumn">
      
      <div id="rightHeader"><img src="images/subheader-img.png" />
        <div id="title"><h2>latest news</h2></div>
      </div>
        


<div id="tumblr_div">
<?php
$request_url ="http://oldtowntattoo.tumblr.com/api/read?type=post&start=0&num=3";
$xml = simplexml_load_file($request_url);
foreach($xml->posts->post as $thePost)
{
    $title = $thePost->{'regular-title'};
    $post = $thePost->{'regular-body'};
    $link = $thePost['url'];
    $small_post = substr($post,0,100);
    echo '<div><h4>'.$title.'</h4>';
    echo '<p>'.$small_post.'</p>';
    echo "...";
    echo "</br><a target=frame2 href='".$link."'>Read More</a></div>";
}
?>    
</div>
    
    <br /><br /><br /><br />
    
        <div id="rightHeader"><img src="images/subheader-img.png" />
        <div id="title"><h2>opening times</h2></div>
    </div>
    
    <div id="openingTimes">
    	<table width="250" border="0">
  <tr>
    <td>Monday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Tuesday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Wednesday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Thursday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Friday:</td>
    <td>10.00 - 18.00</td>
  </tr>
  <tr>
    <td>Saturday:</td>
    <td>10.00 - 19.00</td>
  </tr>
  <tr>
    <td>Sunday:</td>
    <td>11.00 - 17.00</td>
  </tr>
</table>


		
	</div>
    <p class="openingTimes">We recommend you book an appointment in advance. Walk-ins are always welcome, and if we can fit you in on the day, then we will.</p>

  </div>
    
</div></td>           
    
    
    <div id="footer">
    	<div id="footer-text">
       	  <div id="footer_left">
		</div>
        <div id="footer_right">
			<p class="footer"> FOR BOOKING PLEASE CALL: +44 (0)131 5560345<br />
            49 BLACKFRIARS STREET, EDINBURGH, EH1 1NB
			<a class="footer" href="mailto:enquiries@oldtowntattoo.co.uk">enquiries@oldtowntattoo.co.uk</a></p></div>
		</div>
    
    </div>
	

</div>




<script type="text/javascript">Cufon.now();</script>




</body>

</html>
  • 3 Contributors
  • 4 Replies
  • 113 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by matricol
Member Avatar for sagive

What you have is a small problem with the way you ordered stuff..

This div's:
<div id="leftHandColumn">
<div id="secondaryHeader">
<div id="galleryContent">

Should all sit inside one div "container"

Then it would would great!!

What is actually happening is you got (structure simulator :) )

<div> -- NOTHING --
<div> -- NOTHING --
<div> <div to the right>

insted of (putting this 3 into one container):

<div inside me are 3 divs> <div to the right>


i hope this solves your problem..

Member Avatar for jie3

THANK YOU!!!!

That worked perfectly.

Much Appreciated :-)

Member Avatar for sagive

THANK YOU!!!!

That worked perfectly.

Much Appreciated :-)

Happy to help, You got a cool website

Cheers, Sagive

Member Avatar for matricol

the positioning is all messed up

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.