CSS HELP table stretching too far

Question

wilko1995 0 Light Poster

15 Years Ago

Hi all,

I want some help with this code, the problem is that the content and menu are stretching all the way to the right... but should be centered.

/* BEGIN BASIC FORUM STYLES */
body {
	background-color: #4E4E4E;
	text-align: center;			/* make sure IE centers the page too */
}

#wrapper {
	width: 900px;
	margin: 0 auto; 			/* center the page */
}

#content {
	background-color: #fff;
	border: 1px solid #000;
	float: left;
	font-family: Arial;
	padding: 20px 30px;
	text-align: left;
	width: 100%;				/* fill up the entire div */
}

#menu {
float: left;
border: 1px solid #000;
border-bottom: none;		/* avoid a double border */
clear: both;				/* clear:both makes sure the content div doesn't float next to this one but stays under it */
width:100%;
height:20px;
padding: 0 30px;
background-color: #FFF;
text-align: left;
font-size: 85%;
}

#menu a:hover {
	background-color: #009FC1;
}

#userbar {
	background-color: #fff;
	float: right, top;
	width:300px;
}

#footer {
	clear: both;
}

/* begin table styles */
table {
	border-collapse: collapse;
	width: 100%;
}

table a {
	color: #000;
}

table a:hover {
	color:#373737;
	text-decoration: none;
}

th {
	background-color: #B40E1F;
	color: #F0F0F0;
}

td {
	padding: 5px;
}

/* Begin font styles */
h1, #footer {
	font-family: Arial;
	color: #F1F3F1;
}

h3 {margin: 0; padding: 0;}

/* Menu styles */
.item {
	background-color: #00728B;
	border: 1px solid #032472;
	color: #FFF;
	font-family: Arial;
	padding: 3px;
	text-decoration: none;
}

.leftpart {
	width: 70%;
}

.rightpart {
	width: 30%;
}

.small {
	font-size: 75%;
	color: #373737;
}
#footer {
	font-size: 65%;
	padding: 3px 0 0 0;
}

.topic-post {
	height: 100px;
	overflow: auto;
}

.post-content {
	padding: 30px;
}

textarea {
	width: 500px;
	height: 200px;
}

Click here to see pic
that is the problem when it should be likethis.

please help

html-css web-design

Edited 15 Years Ago by wilko1995 because: n/a

2 Contributors
3 Replies
215 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Skorpio07

Dani AI

Generated 7 Months Ago

Quick diagnosis tied to the code posted by : the wrapper is a fixed width but inner blocks (menu/content/table) are set to fill 100% while also having horizontal padding. With the default CSS box model (content-box) that padding is added on top of the 100% width, so the inner area overflows the 900px wrapper and the table appears to “stretch” right. There are also a couple of suspicious rules (for example the invalid float: right, top; on #userbar and a float/clear mix on the menu) that can make float layout behave unpredictably.

A small, low-risk set of fixes that usually resolves this:

/* make widths include padding/border so 100% won't overflow */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* stop tables from forcing horizontal overflow */
table {
  max-width: 100%;
  width: auto;
}

/* correct the invalid declaration */
#userbar { float: right; }

Explanation: switching to box-sizing: border-box means width:100% includes padding and borders, avoiding overflow. table { max-width:100% } prevents a wide table from breaking the layout. Fixing the #userbar float removes an invalid rule that browsers ignore.

If changing the box model is not desirable, an alternative is to remove width:100% from the content/menu and center those blocks with margin:0 auto or set an explicit width that accounts for padding (wrapper width minus horizontal padding). For debugging, use the browser devtools to inspect computed widths and add temporary outlines to containers to see which element is overflowing. If the problem persists, full rendered HTML (as requested) helps reproduce the issue.

All 3 Replies

Skorpio07 0 Newbie Poster

15 Years Ago

please post the rest of your html code (ie the body stuff), need that to reproduce your exact error

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.

wilko1995 0 Light Poster · Answer 1 · 2011-07-13T17:15:45+00:00

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<meta name="description" content="A short description." />
 	<meta name="keywords" content="put, keywords, here" />
 	<title>PHP-MySQL forum</title>
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>My forum</h1>
	<div id="wrapper">
	<div id="menu">
		<a class="item" href="index.php">Home</a> -
		<a class="item" href="create_topic.php">Create a topic</a> -
		<a class="item" href="create_cat.php">Create a category</a> -
		<a class="item" href="users.php">Users</a>
		<div id="userbar">
		<?php
		if($_SESSION['signed_in'])
		{
			echo 'Hello <b>' . htmlentities($_SESSION['user_name']) . '</b>. Not you? <a class="item" href="signout.php">Sign out</a>';
		}
		else
		{
			echo '<a class="item" href="signin.php">Sign in</a> or <a class="item" href="signup.php">create an account</a>';
		}
		?>
		</div>
	</div>
	
		<div id="content">

index.php

<?php
//create_cat.php
include 'connect.php';
include 'header.php';

$sql = "SELECT
			cat_id,
			cat_name,
			cat_description,
			COUNT(topics.topic_id) AS topics
		FROM
			categories
		LEFT JOIN
			topics
		ON
			topics.topic_id = categories.cat_id
		GROUP BY
			categories.cat_name, categories.cat_description, categories.cat_id";

$result = mysql_query($sql);

if(!$result)
{
	echo 'The categories could not be displayed, please try again later.';
}
else
{
	if(mysql_num_rows($result) == 0)
	{
		echo 'No categories defined yet.';
	}
	else
	{
		//prepare the table
		echo '<table border="1">
			  <tr>
				<th>Category</th>
				<th>Last topic</th>
			  </tr>';	
			
		while($row = mysql_fetch_assoc($result))
		{				
			echo '<tr>';
				echo '<td class="leftpart">';
					echo '<h3><a href="category.php?id=' . $row['cat_id'] . '">' . $row['cat_name'] . '</a></h3>' . $row['cat_description'];
				echo '</td>';
				echo '<td class="rightpart">';
				
				//fetch last topic for each cat
					$topicsql = "SELECT
									topic_id,
									topic_subject,
									topic_date,
									topic_cat
								FROM
									topics
								WHERE
									topic_cat = " . $row['cat_id'] . "
								ORDER BY
									topic_date
								DESC
								LIMIT
									1";
								
					$topicsresult = mysql_query($topicsql);
				
					if(!$topicsresult)
					{
						echo 'Last topic could not be displayed.';
					}
					else
					{
						if(mysql_num_rows($topicsresult) == 0)
						{
							echo 'no topics';
						}
						else
						{
							while($topicrow = mysql_fetch_assoc($topicsresult))
							echo '<a href="topic.php?id=' . $topicrow['topic_id'] . '">' . $topicrow['topic_subject'] . '</a> at ' . date('d-m-Y', strtotime($topicrow['topic_date']));
						}
					}
				echo '</td>';
			echo '</tr>';
		}
	}
}

include 'footer.php';
?>

footer.php

</div><!-- content -->
</div><!-- wrapper -->
<div id="footer">created by Wilko</div>
</body>
</html>

Skorpio07 0 Newbie Poster · Answer 2 · 2011-07-14T00:36:46+00:00

well i tried to get this up an running but it needs your SESSION info from the board, so i won't be able to troubleshoot this from my end, would need a live access.

sorry

CSS HELP table stretching too far

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers