Content Is Displaying In The Wrong Way?

scm22ri · August 14, 2012

Hi Everyone,

The content located on my webpage is not being displayed correctly. The footer, right side and content itself isn't being displayed the way I want it to be displayed.

Below you'll see an example of how I want my content displayed

http://whatsmyowncarworth.com/css-test/index.php

Below is how my content is being displayed

http://whatsmyowncarworth.com/css-test/practice-index.php

I've been playing around the syntax for a few hours and not sure what I'm doing wrong. Any pointers?

Thanks everyone!

Below is my syntax

css syntax

 * {padding:0; margin:0;}
a {text-decoration:none;}
p {padding:10px;}
.container {width:700px; margin-left:auto; margin-right:auto}
.header {background-color:#441111}
.header h1 {color:white; line-height:80px;}
.header img {float:left; height:70px; width:100px; padding:5px; margin-right:20px;}
.nav {background-color:#ffdd99; width:150px; float:left;}
.nav ul {margin:15px; list-style-type:none;}
.content {float:left; width:400px;}
.right {background-color:#bb9955; float:left; width:150px;}
.footer {clear:left; background-color:#bb9955;}

>>>>>>>>>>>>>>>>>

practice-index.php syntax

<!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">

<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css-test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
   <div class="header">
<img src="93blazersuv.jpg" alt="93 Blazer SUV" />
<h1>Website Name</h1>
   </div>

<div class="nav">
<p><strong>Navigation</strong></p>
<ul>
<li><a href="one.html">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="Three.html">Three</a></li>
</ul>
</div>

<div class="content">

<?php
//Connect to the database through our include 
include "connect_to_mysql.php";

echo "<table border='1'>";
echo "<tr> <th>User ID</th> <th>Car ID</th> <th>Year</th> <th>Make</th> <th>Model</th> <th>Price</th> <th>Exterior Color</th> <th>Interior Color</th> <th>Engine</th> <th>Transmission</th> <th>Fuel Type</th> <th>Mileage</th> <th>State</th> <th>City</th> </tr>";

$query = "SELECT * FROM car_data2 ORDER BY state ASC";  
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_array($result)) {

$id = $row ["id"];
$car_id = $row ["car_id"];
$year = $row["year"];
$make = $row["make"];
$model = $row["model"];

$price = $row["price"];
$exteriorcolor = $row["exteriorcolor"];
$interiorcolor = $row["interiorcolor"];
$engine = $row["engine"];
$transmission = $row["transmission"];
$fueltype = $row["fueltype"];
$mileage = $row["mileage"];
$state = $row["state"];
$city = $row["city"];
$number = $row["number"];



// keeps getting the next row until there are no more to get
 /*while ($row = mysql_fetch_array($result))*/ {
	// Print out the contents of each row into a table
?>
        <tr>
		<td><?php echo "$id"; ?></td>
		<td><?php echo "$car_id"; ?></td>
		<td><?php echo "$year"; ?></td> 
		<td><?php echo "$make"; ?></td> 
		<td><?php echo "$model"; ?></td> 
		<td><?php echo "$price"; ?></td>
		<td><?php echo "$exteriorcolor"; ?></td>
		<td><?php echo "$interiorcolor"; ?></td>

		<td><?php echo "$engine"; ?></td>
		<td><?php echo "$transmission"; ?></td> 
		<td><?php echo "$fueltype"; ?></td> 
		<td><?php echo "$mileage"; ?></td>
		<td><?php echo "$state"; ?></td>
		<td><?php echo "$city"; ?></td>
	</tr>
<?php
}
/*echo "</table>";*/
}
/*else*/ {
/*trigger_error(mysql_error()); // for development only; remove when in production*/
}
?>

</div>



  <div class="right">
   <p><strong>Right Side</strong></p>
   <p><strong>Right Side</strong></p>
   <p><strong>Right Side</strong></p>
  </div>

  <div class="footer"> 
    <p>Footer</p>
  </div>

</div>
</body>
</html>

Christian F. · August 14, 2012

The reason is quite simple: The main content doesn't fit between the two divs, thus it's moved to a place where it can.

You need to count your pixles, and make sure that nothing expands beyond the limits you have to play with.

scm22ri · August 14, 2012

Hi Christian,

Thanks for the response. I appreciate it but I've accounted for increased pixel space in my .content. I've increased it to 1000px but it still doesn't want to work. I'm not quite sure what I'm going wrong here. Any pointers?

http://whatsmyowncarworth.com/css-test/css/css-test.css

Thanks

Christian F. · August 14, 2012

The DIV with the class container is still only 700px wide, and the content div is only 400px wide.

It stands to reason that neither of these can contain a 1048px wide table, especially not when it is supposed to share that space with two other elements.

I recommend using Opera's Firefly, Firefox' Firebug, or the equivalent for Chrome. Those tools will help you visualize the effects the CSS rules have, and help you accurately count the pixels in use.

PS: You might also want to look at the overflow property in CSS.

Sign In

Content Is Displaying In The Wrong Way?

Recommended Posts

scm22ri

Link to comment

Share on other sites

Christian F.

Link to comment

Share on other sites

scm22ri

Link to comment

Share on other sites

Christian F.

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information