scm22ri Posted August 14, 2012 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/267076-content-is-displaying-in-the-wrong-way/ Share on other sites More sharing options...
Christian F. Posted August 14, 2012 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/267076-content-is-displaying-in-the-wrong-way/#findComment-1369398 Share on other sites More sharing options...
scm22ri Posted August 14, 2012 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/267076-content-is-displaying-in-the-wrong-way/#findComment-1369408 Share on other sites More sharing options...
Christian F. Posted August 14, 2012 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/267076-content-is-displaying-in-the-wrong-way/#findComment-1369411 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.