Rowspan Producing Odd Results

I am working on a web page where I want to place content in bordered boxes of varying sizes. They will be in two columns but top and bottom borders in column 1 are not supposed to line up with the top and bottom borders in column 2. I have created the attached simple web page to demonstrate the code I am using and results I get.

If you look at the attached graphic, you will see what I want and what I am getting. There’s not much to see, but if you want to see it in action, go  here.  It seems silly to have to add two more tables to get what I want.

What’s the problem here and how do I fix it?
Table-Graphic.png
test-rowspan.html
LVL 1
gpinzinoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michael KnightCommented:
Any reason in particular you're using <table> instead of <div> ?
0
Shaun KlineLead Software EngineerCommented:
One option is to add a third column to your layout with a definition like this:
<td style="width: 0px; border: 0px; margin: 0px; padding: 0px;"></td>

However, like Michael mentioned, you should consider using divs.
0
gpinzinoAuthor Commented:
Michael, I hope to put this into an email and I wanted to minimize email and cross-browser issues. Having never tried this before, I wanted to keep it as simple as possible so I went with a table.

Shaun, I tried your idea and it did not work in either my demo or my production page.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Michael KnightCommented:
tables are far more restrictive than <div> lemme ask you a question in your illustration the top and bottom left boxes are not the same size is this a fixed value or could it change from time to time?
0
gpinzinoAuthor Commented:
They will be a set width in the production page.
0
Michael KnightCommented:
regardless, you can just comment out the height property from the CSS
This should work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My CSS Tables</title>
<style type="text/css">
.wrapper {
	border: 1px solid;
	display: inline-block;
	height: auto;
	padding: 10px;
	width: 600px;
}
.left {
	float: left;
	width: 49%;
}
.right {
	float: right;
	width: 49%;
}
.top_left {
	background-color: #330;
	border: solid 1px;
	height: 300px;
	width: 100%;
	margin-bottom: 10px;
}
.top_right {
	display: inline-block;
	background-color: #360;
	border: solid 1px;
	height: 100px;
	width: 100%;
	margin-bottom: 10px;
}
.bottom_left {
	display: inline-block;
	background-color: #3C0;
	border: solid 1px;
	height: 100px;
	width: 100%
}
.bottom_right {
	display: inline-block;
	background-color: #3F0;
	border: solid 1px;
	height: 300px;
	width: 100%
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="left">
    <div class="top_left">
      <p>top left</p>
    </div>
    <div class="bottom_left">
      <p>bottom left</p>
    </div>
  </div>
  <div class="right">
    <div class="top_right">
      <p>top right</p>
    </div>
    <div class="bottom_right">
      <p>bottom right</p>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael KnightCommented:
to expand on my comment on <table> :
CSS 'tables' (divs) are preferable for the exact reason you stated in your original question
It seems silly to have to add two more tables to get what I want.
It solves the problem of having an infinite amount of nested tables in your layout ala FrontPage circa 2001 :) if you have any questions about the above code let me know.
0
gpinzinoAuthor Commented:
Great! I'm sure I will learn a lot from your solution. Thanks for the help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.