Menu
I'm trying to create an HTML table cell with a two-tone background; so I have normal text on a background which is yellow on the left, and green on the right.
The closest I've got so far is as follows. The background is correctly half-and-half, but the content text is displaced below it.
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:relative;
width: 50%;
height: 100%;
background-color:yellow
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="yellow"></div>
<div class="content">Hello</div>
</td>
</tr>
</table>
</body>
</html>
How can I fix this up?
543
You must nest the content DIV in the yellow DIV:
<div class="yellow"><div class="content">Hello</div></div>
[EDIT] This has a flaw: The inner DIV will be confined to the yellow DIV (i.e. it will only use 50% of the page width).
So we need another div, absolute positioning and a z-index:
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:absolute; left:0px; top:0px;
width: 50%;
height: 100%;
background-color:yellow
}
div.container { position:relative; height: 100%; }
div.content { position:relative; z-index:1; }
</style>
</head>
<body style="width: 100%">
<table style="width: 25%; height: 150px;">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="container">
<div class="content">Hello</div>
<div class="yellow"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Works with FF 3.6.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
