• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 499
  • Last Modified:

Div background color issue

I'm trying to create an html layout, but having a problem with the div's and background-color

when I put the div tag withing a table <td> the color does not render
this shows as white "><div style="background-color: #525252"></div>"

I'm sure this is something simple, any help would be greatly appreciated






<table cellpadding="0" cellspacing="0" style="width: 100%">
                  <tr>
                        <td style="width: 212px"><div style="background-color: #525252"></div></td>
                        <td><div style="background-color: #2775f5"></div></td>
                  </tr>
            </table>





 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body style="margin: 0">

<table cellpadding="0" cellspacing="0" style="width: 766px">
	<tr>
		<td style="height: 86px"></td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px"><div style="background-color: #525252"></div></td>
				<td><div style="background-color: #2775f5"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 245px; vertical-align: top; text-align: left;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; height: 245px; vertical-align: top; text-align: left;"><div style="background-color: #ffffff"></div></td>
				<td style="vertical-align: top; text-align: left">&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px"><div style="background-color: #c0c0c0"></div></td>
				<td><div style="background-color: #d3d3d3"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 357px; text-align: left; vertical-align: top;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; background-color: #e9e9e9; height: 358px;"></td>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px"><div style="background-color: #bebebe"></div></td>
				<td><div style="background-color: #2775f5"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 76px; vertical-align: top; text-align: left;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; background-color: #777777; height: 41px;"></td>
				<td>
				<div style="width: 100%; vertical-align: middle; text-align: center;"></div></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</body>

</html>

Open in new window

0
TheWebGuy38
Asked:
TheWebGuy38
  • 4
1 Solution
 
Pratima PharandeCommented:
give some height to it . it is reflection but there is nothing in that div so it is now showing on screen

<div style="background-color: #2775f5;HEIGHT: 10px" ></div>
0
 
Pratima PharandeCommented:
try this is reflectiong
<div style="background-color: #2775f5;HEIGHT: 10px" >test</div>
0
 
Pratima PharandeCommented:
set height and width bothe it is reflection without any text

<div style="background-color: #2775f5;WIDTH: 100px; HEIGHT: 10px" ></div>
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
TheWebGuy38Author Commented:
Oh ya, there we go. silly me. always something stupid, lol. It was rendering, just not using any width or height.

I appreciate your help.
0
 
Pratima PharandeCommented:
glad to help you :)
can you please close the question
0
 
edavoCommented:
<table cellpadding="0" cellspacing="0" style="width: 100%">
      <tr>
            <td style="width:212px;background-color:#525252">Content to go here...</td>      
               <td style="background-color:#2775f5">Content to go here...</td>
      </tr>
</table>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now