Problem with "cell" widths

HTML & CSS
1

Okay, so I am finally working on my portfolio (and I’m having issues, how ironic); in any case, I am using divs as tables (I have no idea how to word that properly), and everything was going smoothly until I added an image to one of the cells…

http://www.twilightmisfit.com/Problem.jpg

I had to insert the wooden spoon handle in the next col as an image to get it to appear how I want, which worked fine except now the col that it’s in became way too wide and I don’t know why or how to fix it…

Help please!


<body>
<div id="mainwrapper">
	<div id="maincontentrow">
		<div id="leftcol">
			&nbsp;
		</div>

		<div id="maincontentcell">
        	<img src="images/backgrounds/mixingbowl_handle.png" alt="" id="woodenspoon" />
            
        	<div id="maincontent">
				<h1>Welcome</h1>
				<p>Main content here</p>
            </div>

		</div>

		<div class="nav">
			<ul class="nav">
			<li><a href="#">Home - block style</a></li>
			</ul>
		</div>

		<div id="rightcol">
			&nbsp;
		</div>

	</div>
</div>




#mainwrapper
{
	display: table;
	background-image: url(../images/backgrounds/countertop.png);
	background-repeat: repeat;
	width: 100%;
	height: 680px;
	max-height: 680px;
}

#maincontentrow
{
	display: table-row;
}


#leftcol
{
	display: table-cell;
	background-image: url(../images/backgrounds/mixingbowl.png);
	background-repeat: no-repeat;
	width: 250px;
}

#woodenspoon
{
	padding-top: 30px;
}

#maincontentcell
{
	width: 300px;
}

#maincontent
{
	display: table-cell;
	width: 248px;
	max-width: 300px;
	height: 296px;
	padding-left: 19px;
	padding-right: 22px;
	padding-top: 21px;
	padding-bottom: 55px;
	background-image: url(../images/backgrounds/papersheet.png);
	background-repeat: no-repeat;
	overflow: auto;
}


/* NAVIGATION STUFF */

div.nav
{
	display: table-cell;
	width: /* fixed width to be determined - padding */;
	padding: 5px;
	background-image: url(recipiecard-image-here);
	background-repeat: no repeat;
}

ul.nav
{
	list-style-image: url(LInav-image-here);
}

ul.nav a
{
	display: block;
	width: /* fixed */
	text-align: left;
}
2

Ryan – thank you. Now I just feel like an idiot… I was changing the properties of one of the divs and adding another and totally forgot to change that display: table-cell to the correct div.

Well, at least it was an easy fix.

Thanks.

3

Don’t feel like an idiot-it’s easy to overspot something like that :).

You’re welcome.

4

Thank you – that was very much appreciated :slight_smile: I’m new here (obviously) so I wasn’t exactly sure where this thread should go x.x

5

Hi, the problem is that you are trying to do this as tables correct? Thus meaning these 3 elements need display:table-cell
#leftcol
#maincontentcell
.nav
(and I guess #rightcol)

Now, exclusing #rightcol (to make my point :)) which element doesn’t have display:table-cell set? See spoiler below

#maincontentcell

Just set display:table-cell and it should patch up (I don’t know if there was anything else you wanted :))

6

Sorry, because you posted in Web Page Design I thought you were looking for alternatives to using tables for layout.

Hence my helpful suggestion - don’t!

Personally I have very little patience with using tables for anything other than tabular data. Perhaps mainly because of problems similar to what you’re experiencing.

But if you’re set on this technique, I can help by moving the thread to the CSS forum. Hopefully someone with more experience with banging tables into shape will be able to help get things straightened out for you.

7

Okay…

1 - not helpful
2 - I’m doing it this way because this is how I want it to look. If you have an actual suggestion for getting this to display how I want it to, that would be great.

This is what it’s suppose to look like: http://www.twilightmisfit.com/comp.jpg

8

Welcome to the wonderful world of “using tables for layout”.

Simply changing table tags to other elements and using CSS to render them as table elements isn’t going to avoid the layout issues associated with using tables for layout (although it may be better for accessibilty I suppose).

I know you can use nested tables, colspan and rowspan with tables.
And I guess you could use CSS to mimic the effect here.

But why? IMHO you should consider scrapping the “display as table” stuff and go with an elastic/fluid design instead.