below is the code for my index.php, the problem i have is that once i have tomany words in a post, they start overlapping rather than being one under each other. i am embing youtube videos under the text any help or advice would be much appreciated

 

<?php

get_header(); ?>

		<div id="main-content" class="clearfix" >

			<div id="topSection" >
				<div id="mainVideo">
				<iframe width="500" height="300" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
				</div><!--end of main video -->

				<div id="ashleyFacts">
				<h1>Ashley Facts</h1>
					<ul id="ashFacts">
						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a href="#">Link 3</a></li>
						<li><a href="#">link 4</a></li>
					</ul><!-- end of ash facts links -->

					<img src="<?php bloginfo('template_url'); ?>/images/ashFacts.png" />
				</div><!-- end of ashley facts -->
				</div><!-- end of top section -->

				<div id="seperator"> </div><!-- end of seperator -->

<div id="left-content">

				<div class="advertisement">

				</div><!-- end of advertisment -->

				<div class="left-links">
				<div id="links-top">Heading</div>
					<ul class="left-ul">

						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a href="#">Link 3</a></li>
						<li><a href="#">Link 4</a></li>
						<li><a href="#">Link 5</a></li>
					</ul><!--end of left ul links -->

				</div><!-- end of left links -->


				<div class="advertisement">

				</div><!-- end of advertisment -->

				<div class="left-links">
				<div id="links-top">Heading</div>
					<ul class="left-ul">

						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a href="#">Link 3</a></li>
						<li><a href="#">Link 4</a></li>
						<li><a href="#">Link 5</a></li>
					</ul><!--end of left ul links -->

				</div><!-- end of left links -->

				<div id="twitter">
					<div class="tweet"> </div>
				</div><!-- end of twitter -->

				<div class="advertisement">

				</div><!-- end of advertisment -->


			</div><!--end of left content -->

			<div id="right-content">

				<?php if (have_posts()) : ?><br />
				<?php while(have_posts()) : the_post(); ?>
					<div class="post"<?php post_class();?>>
						<div class="content">
							<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
							<ul>
								<li><?php the_time('m,d,y'); ?></li>
								<li><?php the_category(', '); ?></li>
							</ul>

						<div class="post-text">	<?php the_content(''); ?></div>

							<div class="border"></div>

						</div>
					</div>

					<?php endwhile; ?>

					<div class="pagination">
						<p class="older"><?php next_posts_link('older posts'); ?></p>
						<p class="newest"><?php previous_posts_link('newest posts'); ?></p>
					</div><!--end of pagination -->

				<?php else : ?>

				<h2>no posts found</h2>
				<?php endif; ?>

			</div><!-- end of right-content -->

		</div><!-- end of main content -->

		<div class="bottom-links">

			<div id="bottom-videos">
				<p>Videos</p>
				<div id="bottom-video">
					<iframe width="100" height="60" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->

				<div id="bottom-video">
					<iframe width="100" height="60" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->

				<div id="bottom-video">
					<iframe width="100" height="60" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->					


			</div><!-- end of bottom videos -->

			<div id="bottom-photos">
				<p>Photos</p>

				<div id="bottom-pics">
					<img src="<?php bloginfo('template_url'); ?>/images/ashFacts.png" width="100" height="60" alt="" />
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->

				<div id="bottom-pics">
					<img src="<?php bloginfo('template_url'); ?>/images/ashFacts.png" width="100" height="60" alt="" />
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->

				<div id="bottom-pics">
					<img src="<?php bloginfo('template_url'); ?>/images/ashFacts.png" width="100" height="60" alt="" />
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->


			</div><!-- end of bottom videos -->

			<div id="bottom-customers">
				<p>Audience</p>

				<div id="bottom-aud">
					<iframe width="100" height="60" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->

				<div id="bottom-aud">
					<iframe width="100" height="60" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->

				<div id="bottom-aud">
					<iframe width="100" height="60" src="http://www.youtube.com/embed/JQbk-TZg0X0" frameborder="0" allowfullscreen></iframe>
					<p>this is where some text would go for the video</p>
				</div><!-- end of bottom video -->					

			</div><!-- end of bottom videos -->

<?php get_footer(); ?>			
		</div><!-- end of bottom links -->

It could be a CSS issue.

 

Do the elements still overlap when you view the page after disabling CSS support in your browser?

 

Rich

It could be a CSS issue.

 

Do the elements still overlap when you view the page after disabling CSS support in your browser?

 

Rich

 

no they dont, they sit fine once the css is disabled. do you know what part of the css that might be causing the problems, ive tried overflow:hidden; but didnt work

 

collie

Edited June 20, 201214 yr by collie

got it fixed with the overflow:hidden;