Help with CSS and floating

Hi All,

    I have this page setup with CSS except I need the table to appear underneath the graphic like in the first section.  (see screenshot)

   I've also included the CSS.  Any optimization help is greatly appreciated!  I'm still fairly new at this CSS stuff. :)

Thanks - Zack
screen shot
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.text
{
color:#000000;
font-family:Tahoma, Arial, Helvetica, Georgia;
border-top-style:none;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-color:#c4c5ff;
border-width:5px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#c4c5ff;
float:left;
display:block;
}

tr, td, table {
color:#000000;
font-family:Tahoma, Arial, Helvetica, Georgia;
background-color:#c4c5ff;
}

body {
	background-color: #000000;
}
</style>

</head>

<body>

<p><span class="text" style="width:436px;"><img src="images/hdr_prevvisit.png" width="439" height="46" />Testing<br />
  1<br />
  2<br />
</span>

<span class="text" style="width:436px; margin: 0px 0px 0px 100px;"><img src="images/hdr_prevvisit.png" width="439" height="46" />
<table border=0 width=436 class="text"><tr>
  <td>Hello</td>
  <td>Column 2</td>
</tr>
<tr>
  <td>Row 2</td>
  <td>Row 2 Column 2</td>
</tr>
</table>
</span><br />

</p>
</body>
</html>

Open in new window

LVL 4
zack4x4Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

Dushyant SharmaCommented:
try the second span as below:
<span class="text" style="clear:both;width:436px; margin: 10px 0px 0px 0px;">
0
user_nCommented:
The code end the image that you provide are confusing.
1First decision of your problem
You can put the to sections in two tables and you can divide them in to divs
2Second decision
You can put all in one table with 3 columns

What exactly do you want
To work with tables
or
To work with divs

Your code is very confusing for me.
one row is made in table by
<table>
<tr></tr>
</table>

and columns are stored with <td> tags like this
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

This is a table with one row and three columns
0
zack4x4Author Commented:
ddsh that didn't work it just put the 2nd span below the 1st and the columns are still next to the 2nd span

and user_n yes I know how to make tables, rows and columns.  I want the table that I'm creating within the 2nd span (right below it).
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Dushyant SharmaCommented:
the idea is to break the floating elements below each other. While trying your code it showed only two boxes so i added clear:both to the second item. may be it was the image which was not available with me. So you can simply add clear property to any element which you do not want to stay aside other elements.
0
NrisimhaCommented:

It works if you change:

<span class="text" style="width:436px; margin: 0px 0px 0px 100px;">

into

<span class="text" style="width:436px; margin: 0px 0px 0px 0px;">


Nrisimha
0
NrisimhaCommented:

But I think that it will help if you decrease this valu 100px into 50px.

For example, change:


<span class="text" style="width:436px; margin: 0px 0px 0px 100px;">

into:


<span class="text" style="width:436px; margin: 0px 0px 0px 50px;">


Nrisimha
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
user_nCommented:
Is this good enough?
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.text
{
	color:#000000;
	font-family:Tahoma, Arial, Helvetica, Georgia;
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	border-color:#c4c5ff;
	border-width:5px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#c4c5ff;
	float:left;
	display:block;
}

tr, td, table {
	color:#000000;
	font-family:Tahoma, Arial, Helvetica, Georgia;
	background-color:#c4c5ff;
}

body {
	background-color: #000000;
}
#wrap{
	 display:block;
	 width:100%;
}
#left{
	display:block;
	float:left;
}

#right{
	display:block;
	float:right;
}
</style>

</head>

<body>
	<div id="wrap">
		<div id="left" class="text">
			<div>
				<img src="images/hdr_prevvisit.png" width="439" height="46" alt="test"/>Testing
			</div>
			<div>
				1
			</div>
			<div>
				2
			</div>
		</div>
		<div id="right">
			<div>
				<img src="images/hdr_prevvisit.png" width="439" height="46" alt="test1"/>
			</div>
			<div>
				<table border="0" width="436" class="text">
					<tr>
						<td>Hello</td>
						<td>Column 2</td>
					</tr>
					<tr>
						<td>Row 2</td>
						<td>Row 2 Column 2</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
zack4x4Author Commented:
None of that worked but I will give split the points for trying.  I will come up with a different way I guess...

Thanks though
Zack
0
zack4x4Author Commented:
None of this worked but thanks for your help.  I will come up with another solution.
0
NrisimhaCommented:

Hello zack4x4,

Here is my solution that finally works under IE, Firefox, Safari and Google Chrome:


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.text
{
color:#000000;
font-family:Tahoma, Arial, Helvetica, Georgia;
border-top-style:none;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-color:#c4c5ff;
border-width:5px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#c4c5ff;
float:left;
display:block;
}

tr, td, table {
color:#000000;
font-family:Tahoma, Arial, Helvetica, Georgia;
background-color:#c4c5ff;
}

body {
	background-color: #000000;
}
</style>

</head>

<body>

<span class="text" style="width:439px;"><img src="images/hdr_prevvisit.png" width="436" height="46" />
  <br>
  Testing<br />
  1<br />
  2<br />
</span>

<span class="text" style="width:439px; margin: 0px 0px 0px 100px;">
<img src="images/hdr_prevvisit.png" width="436" height="46" />
<table border=0 width="433" class="text">
<tr>
  <td>Hello</td>
  <td>Column 2</td>
</tr>
<tr>
  <td>Row 2</td>
  <td>Row 2 Column 2</td>
</tr>
</table>
</span>
<br />

</body>
</html>

Open in new window


Here is also HTML file you can check:

 final.html


thank you for all

Nrisimha

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
CSS

From novice to tech pro — start learning today.