Maybe someone could explain to me how this works, or how this is supposed to make sense:

I'm trying to use DIVs more, as I've seen this is a desireable thing to do. So, I'm doing some testing for one of my pages. Inside my main table layout table cell, I put a div. It's a div I want to span the width of the cell. So, in my CSS I put "width: 100%". This works. However, simply for design purposes, I have 10pixel borders on the left and right of this DIV. This makes the DIV 100% wide plus 20 pixels. So, just to test, I tried "width: 730px" (the width of the table cell). This works as I thought it would, as in the DIV, including borders, is 730px wide.

Is this an IE thing? Is this a CSS thing? What is this? I'd like to have this DIV be expandable, and I'd like to understand how it acts for my own knowledge, but this doesn't make sense to me.

Elements of the Box Model and the Box Model Hack. That may get you started.

Then again, I may be misreading your post.

Edit: Try using a SPAN tag rather than a DIV, as SPANs are inline elements.

Do you have a snippet of html for us to play with? I'm not sure exactly what's happening to you. There definitely are issues between browsers with DIVs. But, with the right tweaking and implementation you can get stuff to look pretty much the way you want it across the board.

Also, if you're using DIVs anyway... why not do away with the tables altogether? That would be the easiest solution, IMO.

I'm not sure doing away with tables completely is the way I want to go at the moment. I recently completely rewrote my site for XHTML compliance, and don't want to do something so drastic again. Plus, I don't see what's so wrong with tables? Frankly, I think they're a far better layout tool than DIVs and SPANs. With those it seems like it's a crap shoot in how it will format. You can move them around more, but I use tables in situations where I don't want something to move around. Perhaps if the W3C and the various browser companies (sorry, but Netscape was the worst) had worked out the huge descrepencies with tables, it would have worked out better. Ah well, sorry for the rant.

Anyway, the HTML is at the bottom of the page at www.dignan17.com/links

The CSS looks like this:

div.linkshead

{

border: solid #880000;

border-width: 1px 10px 1px 10px;

width: 730px;

text-align: center;

margin-bottom: 5px;

font-weight: bold;

background-color: #EEEEEE

}

It's really late so I'm sorry I don't have time to look at this right now. But right off the bat, I can see one problem...

If you want it to be XHTML compatible, you'll need to change your div style to this:

#linkshead
{...

rather than dev.linkshead

then you'll want to throw an id into your div tag as follows:

<div id="linkshead">...</div>

rather than calling linkshead in the class element. Part of the XHTML specification is that all divs have to have an ID.

aaaaaaand to bed. I'll fiddle with it more in the morning.

Try this:

.linkshead

{

border: solid #880000;

border-width: 1px 10px 1px 10px;

width: auto;

text-align: center;

margin-bottom: 5px;

font-weight: bold;

background-color: #EEEEEE

}

And then in the body of your code:

<div class="linkshead">Test<div>

By setting the width to auto, it should default to 100% and be resizable.

Make sure you use the 'class' selector rather than the 'id' selector in this case. In order for a page to validate, it can't have multiple 'id' tags with the same name.

By the way, you have alot of extraneous <br/> tags in your code.

That works, thanks alot!

By the way, what's the advantage of ids? I know why not to use them in this situation, since I plan on having many of them, but what do I use them for?

The only way you would want to use ID tags in this situation is if you wanted to classify different areas of your page. For example, you could create the following DIV tags to section out your code:

<div id="featuredLinks">
<div id="reference">
<div id="shopping">

...and so on. This may or may not be beneficial for several reasons. ID tags acts as anchor tags, which replace the classic HTML <a id="anchor" name="anchor"></a> line. ID tags also allow you to apply a selector to a specific inside HTML element by simply stating the selector first, like so:

#featuredLinks a:link { color: red; text-decoration: underline }
#reference a:link { color: blue; text-decoration: none }

In other words, by naming the ID selector and then the specific HTML element (in this case an anchor tag), we can specify that the links in your Featured Links selection be red in color and have and underline, whereas the links in your Reference section be blue with no underline.

By grouping an entire section in a DIV with and ID selector (i.e., <div id="navigation">) you are able to effect that entire section with a couple of rules.

I hope this makes sense.

Here is an example of how I would set up your Links page:

<body id="links">
<h3>Featured Links</h3>
<ul>
<li>Construct Records</li>
<li>Google</li>
<li>All Music Guide</li>
<li>Roger Ebert</li>
<li>IMDb</li>
<li>Download.com</li>
<li>Phi Mu Alpha NS</li>
</ul>
</div>

And so on. Then use the following CSS code, which applies the rules only to the page with the BODY ID classification of "links":

#links h3 

{ 

	border: solid #880000; 

	border-width: 1px 10px 1px 10px; 

	width: auto; 

	text-align: center; 

	margin-bottom: 5px; 

	font-weight: bold; 

	background-color: #EEEEEE;

	font-size: 10px; 

	font-family: tahoma;

	line-height: 12px; 

	text-decoration: none;

	padding-top: 2px; 

	padding-bottom: 2px  

}

#links ul  

{ 

	margin: 0; 

	padding: 0 

}

#links li  

{ 

	text-align: center; 

	list-style-type: none; 

	display: inline; 

	width: 24%; 

	float: left 

}

That's what I thought they were for. I guess they're more specific than just a class, basically?

That's fine, I don't need that. These are going to be pretty uniform throughout the page.

Thanks for your help, though. The next time I have a single element (of group of elements) that I want to apply a style to, I'll use that.