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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

All Courses

From novice to tech pro — start learning today.