6 replies [Last post]
brick
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-08-12
Posts: 17
Points: 0

Hi,

Firstly here is the problem page:
http://www.thewishingtree.me.uk/ff-divsnot100perc.gif

The section where it says "Client Summary" is defined by the following CSS:

#section {
	background: red;
	border: solid #BBBBBB;
	border-width: 1px 0 1px 1px;
	background-color: white;
	margin: 0 0 2em 150px;
	z-index: 0;
}

#section #header {
	border-bottom: 1px solid #BBBBBB;
	border-right: 1px solid #BBBBBB;
	margin-right: 12em;
}

#section #header #header-pad {
	padding: 8px;
}

#section #content {
	line-height: 1.5em;
	padding: 2em;
	border-right: 1px solid #BBBBBB;
	margin-right: 12em;
	overflow: hidden;
}

and defined by the following html:

<div id="section">
	<div id="header">
		<div id="header-pad">
			<div id="test">&nbsp;</div>
			<!-- select list here, removed to reduce code size -->
		</div>
	</div>

	<div id="content">
		<div id="pagetitle">Client Summary</div>
		...
	</div>
</div>

In the above segment of html code, you can see "..." within this area there are simply div tags followed by one another like so:

<div id="clientsummary">
	<div id="title">Domain / Hosting</div>
	...
</div>

<div id="clientsummary">
	<div id="title">Invoices</div>
	...
</div>

As you can see in the screenshot, some of these div's extend only part of the way, and 1 extends the full width, the way I intended it. Infact on looking on any of the pages, none of the divs I create extend to the full width of the parent div. Why is this? What could I be missing. I have my doctype defined etc.

Thanks,

Dave.

brick
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-08-12
Posts: 17
Points: 0

Divs different widths?

Furthermore,

When there is no "img" tag used within the "Domain / Hosting" div, all the divs (the ones with the dashed borders) all extend to the correct width? This is good, but I need to be able to add images to my site.

Thanks,

Dave.

brick
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-08-12
Posts: 17
Points: 0

Divs different widths?

Bump, Anyone know anything about this at all?

I cannot solve it, and its happening all over the place.

Thanks,

Dave.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Divs different widths?

Surely that's not all the CSS? Where's the bit that refers to #clientsummary or that defines the dotted borders. Also, you're assigning multiple instances of IDs. IDs must be unique - you should use classes for multiple instances.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brick
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-08-12
Posts: 17
Points: 0

Divs different widths?

Thanks for your reply:

The HTML source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
	<title>Prism-Hosting Client Management Suite</title>
	<link href="./styles/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="banner">
	<p><a href="/latest" id="logo">Client Hosting Control Panel</a></p>

</div>

<div id="logindetails">
	<p>Welcome David</p>
</div>

<div id="menu">
	<div id="m-home"><p><a href="index.php">home</a></p></div>
	<div id="m-clients" class="selected"><p>clients</p></div>
	<div id="m-invoices"><p><a href="invoice-index.php">invoices</a></p></div>
	<div id="m-domains"><p><a href="domain-index.php">domains</a></p></div>
	<div id="m-services"><p><a href="service-index.php">services</a></p></div>
	<div id="m-tickets"><p><a href="ticket-index.php">tickets</a></p></div>

</div>

<div id="leftsubsection">
	<div id="box">
	<p><a href="client-index.php">Client List</a></p>
	<p><a href="client-add.php">Add Client</a></p>
	</div>

	<br />
	
	<div id="box">
		<p><b>Paul Wallace</b></p>
		<p><a href="./client-summary.php?acid=0000000001">Summary</a></p>
		<p><a href="./client-profile.php?acid=0000000001">Profile</a></p>
		<p><a href="./service-add.php?acid=0000000001">Add Service</a></p>
		<p><a href="./client-services.php?acid=0000000001">View Services</a></p>

		<p><a href="./client-invoices.php?acid=0000000001">View Invoices</a></p>
	</div>

</div>

<div id="section">
	<div id="header">
		<div id="header-pad">
			<div id="test">&nbsp;</div>
			<div id="clientjump">Active Client: <select name="clientjump" onChange="ClientJump(this, 'client-summary.php')" class="clientjump"><option value="0">None</option><option value="0000000006">Alan Hill</option><option value="0000000015">Andrew Duffy</option></select></div>

		</div>
	</div>

	<div id="content">
		<div id="pagetitle">Client Summary</div>
		<div id="clientsummary">
	<div id="title">Personal</div>
	<div id="client">Paul Wallace</div>

	<div id="registered">Registered: Tuesday 01st January 2002</div>
	<div id="profile">
		<table width="100%" cellpadding="1" cellspacing="2" border="0">
			<tr>
				<td width="100">Email:</td>
				<td>***@***.com</td>
			</tr>

			<tr>
				<td valign="top">Address:</td>
				<td>***</td>
			</tr>
			<tr>
				<td>Tel. Daytime:</td>
				<td>***</td>
			</tr>
			<tr>
				<td>Tel. Evening:</td>
				<td>***</td>
			</tr>
		</table>

	</div>
</div>

<div id="clientsummary">
	<div id="title">Domain / Hosting</div>
		<div><img src="./images/icon_plus.gif" border="0" />&nbsp;icgt.co.uk</div>
</div>

<div id="clientsummary">
	<div id="title">Invoices</div>

	Show upcoming invoices.
</div>


	</div>
</div>

<div id="rightsection">
</div>

<div id="footer">
	Design and Graphics &copy;Copyright to David Goodchild. All rights reserved.
</div>

</html>

The CSS source:
http://manager.prism-hosting.com/latest/styles/style.css

When you say, I am assigning multiple instances of IDs, how do you mean, I have seen on many other sites, people nesting ID's, which is what I thought I was doing.

Thanks,

Dave.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Divs different widths?

You can't have more than one element with the same ID. If multiple elements are to have the same style, you have to use class instead. So <div class="clientsummary">, not <div id="clientsummary">.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brick
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-08-12
Posts: 17
Points: 0

Divs different widths?

Ohhhhh, there's an important concept I never knew until now. That might solve alot of things on other sites too. Thank-you for informing me of that!...

Also, is that what causes the bizzare behaviour I'm experiencing? I'll probably know the answer to that when I correct my code I suppose.

Thanks,

Dave.