Divs messed up

Question

jie3 0 Newbie Poster

12 Years Ago

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>

web-design

3 Contributors
4 Replies
113 Views
5 Days Discussion Span
Latest Post 12 Years Ago Latest Post by matricol

All 4 Replies

sagive 24 Junior Poster in Training

12 Years Ago

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):

i hope this solves your problem..

Reply to this topic

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.

jie3 0 Newbie Poster · Answer 1 · 2011-06-17T09:47:17+00:00

THANK YOU!!!!

That worked perfectly.

Much Appreciated :-)

sagive 24 Junior Poster in Training · Answer 2 · 2011-06-17T15:46:00+00:00

THANK YOU!!!!
That worked perfectly.
Much Appreciated :-)

Happy to help, You got a cool website

Cheers, Sagive

matricol -8 Junior Poster in Training · Answer 3 · 2011-06-22T17:59:52+00:00

matricol -8 Junior Poster in Training

12 Years Ago

the positioning is all messed up

Divs messed up

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers