Centering middle cell, code included.

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?

Jul 23 '05 #1

Subscribe Post Reply

2055

Kris

In article <cl**********@newsg4.svr.pol.co.uk>,
"luke" <lu*********@noemailspam.com> wrote:

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?

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>

--
Kris
<kr*******@xs4all.netherlands> (nl)

Jul 23 '05 #2

luke

"Kris" <kr*******@xs4all.netherlands> wrote in message
news:kr*****************************@news1.news.xs 4all.nl...

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

Wait, I think you misread my post!

Jul 23 '05 #3

Kris

In article <cl**********@news5.svr.pol.co.uk>,
"luke" <lu*********@noemailspam.com> wrote:

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

Wait, I think you misread my post!

Maybe. So now what?

--
Kris
<kr*******@xs4all.netherlands> (nl)

Jul 23 '05 #4

jmm-list-gn

luke wrote:

<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.
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.

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.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jul 23 '05 #5

Robert Frost-Bridges

luke wrote:

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

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

--
frostie
http://brightonfixedodds.net

Jul 23 '05 #6

Similar topics

centering images vertically...

by: George Ziniewicz | last post by:

.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...

HTML / CSS

XHTML/CSS Standard Vertical Centering sought

by: Kenneth | last post by:

Okay, I've been scouring Google for hours looking for a solution to this problem, but as of yet I can't find one. XHTML Transitional seems to specify that I can no longer set a table's height to...

HTML / CSS

centering list elements

by: yawnmoth | last post by:

I'm trying to center list elements in a webpage I'm working on, and setting margin-left to auto for ol (or ul) seems to prevent the number (or bullet) from displaying in IE6 (strict mode) and...

HTML / CSS

[CSS] Centering a small block in a larger block

by: Daniel Déchelotte | last post by:

Hi, This is actually two questions in one: how to have a block just fit the data it contains (see my "table-cell" kludge) and how to have it centered in a larger block? My idea is to have my...

HTML / CSS

Vertically centering tables

by: Daniel Kaplan | last post by:

Hi All, Am trying to vertically center a table, and failing miserably at it. Have tried everything with this: <table border=1 width=100% valign=MIDDLE> taking out width, etc. I just...

HTML / CSS

DataGrid - centering

by: anonymous | last post by:

I have created a DataGrid control with checkboxes, TextBoxes, ComboBoxes, and NumericUpDowns. Since I used the DataGridBoolColumn, the checkbox is displayed in the center of the cell, horizontally...

C# / C Sharp

vert and hor centering text in <div>

by: John Pote | last post by:

1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...

HTML / CSS

Vertical centering without tables

by: Markus Ernst | last post by:

Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...

HTML / CSS

Centering left-floated items - how? Please help!

by: rudicheow | last post by:

SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General