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 ? '' : '') + '.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 ="";
$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 ? '' : '') + '.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 ="";
$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
  • 125 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

Quick summary: was right — the page’s visual break came from the document structure rather than a mysterious CSS bug. When the left-side blocks aren’t grouped (or when stray table/center tags or unclosed elements appear), the right column can end up nested or pushed down by later content. ’s confirmation shows the layout returned to normal once those sections were wrapped correctly.

Troubleshooting checklist that helps find the exact fault:

  • Validate the HTML (w3c validator) to catch unclosed tags or illegal nesting.
  • Use browser DevTools (Elements panel) to verify whether the right-column element is a sibling of the left container or accidentally inside it.
  • Search the source for stray table tags, lone <td>, or deprecated <center> tags — those will change flow and cause unexpected placement.
  • Confirm float/width maths: the sum of floats, margins and padding must fit inside the wrapper; otherwise elements drop.
  • After fixing markup, contain floats with a clearfix or by forcing the wrapper to establish a new block formatting context.

Example CSS fixes (add to the wrapper that should contain the left sections):

/* clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* alternative: make wrapper contain floated children */
.container { overflow: auto; }

For longer-term stability, avoid mixing table tags with DIV layouts, avoid presentational tags like <center>, and consider converting the two-column layout to Flexbox or Grid to remove float-related fragility. As observed, “positioning is messed up” is often just a symptom of broken markup rather than broken CSS.

Recommended Answers

All 4 Replies

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.