How can I get this image to display correctly?

Bruce Gust
Bruce Gust used Ask the Experts™
on
Head out to http://loosecannonfitness.com/mobile/hammons.php

The iphone graphic is extending past my page and I want it to display within my "actual_text" div.

Here's my HTML

<?php require_once('header.php'); ?>
<div class="body_filler">
	<div class="actual_text"><br><br>
	<img src="../images/hammons.png" class="hammons"><img src="../images/iphone.png" class="iphone">John Q. Hammons Hotels invites you to experience a free workout experience designed by a former Marine that you'll want to hang on to even after you get back to the house!<br><br>Choose either "<a href="http://loosecannonfitness.com/workouts.php" target="_blank">1775</a>," which is primarily calisthenics, or the "<a href="workouts.php" target="_blank">Devildog</a>" workout, which has you using free weights, and enter your email address. You'll receive a link in your inbox that will give you access to a series of audio files that you'll import into your iTunes. Then just hit "play" and buckle up for an amazing workout!
	<br><br><br>
	<div class="conclusion"><form action="hammons_insert.php" method="Post">
		<table style="width:100%;">
			<tr>
				<td><input type="checkbox" name="1775" value="Y"></td>
				<td>"<b>1775</b>" - military style calisthenics. Can be done either in the hotel gym or in your room. Click on the red arrow to the right to hear a sample of "Burpees!"</td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;<br></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="devildogs" value="Y"></td>
				<td>"<b>Devildogs</b>" - weight training session based on German Volume Training. You’ll get an amazing workout with no more than a couple sets of dumbells. </td>
			</tr>
				<tr>
				<td colspan="2">&nbsp;<br></td>
			</tr>
			<tr>
				<td colspan="2">
					<table style="width:100%;">
						<tr>
							<td><b>email address:</b></td>
							<td><input type="text" class="email_address" name="email_address"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align:center;">
				<input type="image" src="../images/submit_button.png" class="submit_button">
				</td>
			</tr>
		</table>
	</div>
</div>
<?php require_once('footer.php'); ?>

Open in new window


How can I get my "actual_text" dynamic to encompass the graphic or vice versa so my graphic isn't hanging off the edge?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
In your css, you define actual_text to have a width of 1425px, which is wider than most screens. You should consider narrowing that if the iphone graphic is falling off the screen.
Bruce GustPHP Developer

Author

Commented:
It's not that it's hanging off the edge, as in either the left or right edge. Rather, it's hanging off the bottom.

There are two divs that I'm thinking could be problematic, yet I don't see what the problem could be. I've got:

<div class="body_filler">
      <div class="actual_text"><br><br>

Both of these are set to height:auto; yet...

edge
Why does my body_filler come to an end? I'm thinking it should encompass my iphone graphic.
so you want the actual_text div to contain the phone? Try adding an overflow option to actual_text, like this:

.actual_text {
    width: 1425px;
    margin: auto;
    height: auto;
    overflow: hidden;
}
Bruce GustPHP Developer

Author

Commented:
Perfect!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial