Centering middle cell, code included.

L

luke

I need to have two different backgrounds, one on the left and one on the
right of the screen, with the main content centered in the browser. This is
the code I have come up with

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="49%" background="left.gif"><img src="shim.gif" alt=""
height="1" width="1"></td>
<td width="2%" valign="top"> ALL CONTENT </td>
<td width="49%" background="right.gif"><img src="shim.gif" alt=""
height="1" width="1"></td>
</tr>
</table>

This seems to work perfectly, however I'm slighlty unsure as the numbers
don't add up. Say my Content in the middle cell is a 750 pixel wide nested
table, this would obviously mean that the percentage are not as described.
Is there a chance that certain browsers will choke on this code? and maybe
not display the middle cell in the middle of the page?
 
K

Kris

luke said:
I need to have two different backgrounds, one on the left and one on the
right of the screen, with the main content centered in the browser. This is
the code I have come up with

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="49%" background="left.gif"><img src="shim.gif" alt=""
height="1" width="1"></td>
<td width="2%" valign="top"> ALL CONTENT </td>
<td width="49%" background="right.gif"><img src="shim.gif" alt=""
height="1" width="1"></td>
</tr>
</table>

This seems to work perfectly, however I'm slighlty unsure as the numbers
don't add up. Say my Content in the middle cell is a 750 pixel wide nested
table, this would obviously mean that the percentage are not as described.
Is there a chance that certain browsers will choke on this code? and maybe
not display the middle cell in the middle of the page?
Click to expand...

Wait, you mean, all that when this will do?

CSS:
body {
color: #000;
background: url("750pxwidegreenblock.png") #0000cc repeat-y;
text-align: center;
}
#content {
width: 750px;
margin: 0 auto;
text-align: left;
color: #000;
background: green;
}

HTML:
<body>
<div id="content">
Whatever content you have.
</div>
</body>
 
J

jmm-list-gn

luke said:
<td width="49%" background="left.gif"><img src="shim.gif" alt=""
<td width="2%" valign="top"> ALL CONTENT </td>
<td width="49%" background="right.gif"><img src="shim.gif" alt=""
This seems to work perfectly, however I'm slighlty unsure as the numbers
don't add up.
Click to expand...
My math says that 49 + 2 + 49 = 100. Seems to add up.
Say my Content in the middle cell is a 750 pixel wide nested
table, this would obviously mean that the percentage are not as described.
Click to expand...
Why do you care? You already ignore the percentages to get an
expandable middle section. If the total image widths exceed the viewable
area, the table expands beyond the view.
You'd have to view the result with different browsers to verify how
they handle it.
 
R

Robert Frost-Bridges

luke said:
I need to have two different backgrounds, one on the left and one on
the right of the screen, with the main content centered in the
browser. This is the code I have come up with
Click to expand...

Join the two backgrounds together using a graphics program then use
Kris' example with this single background.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Sort by number of characters 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Centering picture element for larger screen sizes 2
Help with Visual Lightbox: Scripts 2
How to have two html audio players on one page? 0
SendGrid email issue in responsive Gmail 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 24 (members: 1, guests: 23)
Robots: 309

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top