asked on

Div in table - display two on one line

Unfortunately I am stuck with how teh html comes out for some web pages I am building because they are done through a CMS, but I can control the CSS and I am trying to get two tables/div's to display on the one line.

this is the code outputted by the CMS, I want widget 1786 and 1787 to be on the one line;

<table id="Module1786_TableWidgetBox" cellspacing="0" cellpadding="0" border="0" style="width:100%">
	<tr id="Module1786_TRDisplayWidgetBox">
		<td class="clsnormal" style="width:100%"><a name="WidgetTopAnchor1786"></a>
        <div class="widget homepageLinksWidget" id="Widget1786">	<h2>Buy Wine</h2>
            <div class="mainItem">
            <dl>
            <dt><a href="http://wineselectorscmdev.wineselectors.com.au/Wine-Selectors/Quick-Links/Buy-Wine/Clearance-Sale/default.aspx"><span class="mainItemHeading">Clearance Sale</span></a></dt>
            </dl>
            </div>
        </div>
		</td>
	</tr>
</table>   
<table id="Module1787_TableWidgetBox" cellspacing="0" cellpadding="0" border="0" style="width:100%">
	<tr id="Module1787_TRDisplayWidgetBox">
		<td class="clsnormal" style="width:100%"><a name="WidgetTopAnchor1787"></a>
		<div class="widget homepageLinksWidget" id="Widget1787">	<h2>Become a member</h2>
            <div class="mainItem">
            <dl>
            <dt><a href="http://wineselectorscmdev.wineselectors.com.au/Wine-Selectors/Quick-Links/Become-a-member/Benefits/default.aspx"><span class="mainItemHeading">Benefits</span></a></dt>
            </dl>
            </div>
        </div>
		</td>
	</tr>
</table>

Open in new window

LordOfPorts

Try the following CSS, you can tweak the width in px if you do not want auto width but keep in mind there must be enough space for both to fit on the same line:

<style type="text/css">
 
#Module1786_TableWidgetBox
{
	float:left;
	width:auto !important; /* You can adjust the width in e.g. pixels but there must be enough space for both to fit */
}
 
#Module1787_TableWidgetBox 
{
	float:right;
	width:auto !important; /* You can adjust the width in e.g. pixels but there must be enough space for both to fit */
}
</style>

Open in new window

AWSHelpdesk

ASKER

Almost there, they need to be next to each other though instead of one under the other?
screenshot.png

Fero45

I would use for both
float: left;
width: 250px;

AWSHelpdesk

ASKER

Tried that as well, then it looks like this;

I even tried making each width smaller incase they weren't fitting but no luck.

I have attached a screen shot and the css code

table#Module1786_TableWidgetBox
	{
			float:left;
			width: 250px !important; 
	}
	 
	table#Module1787_TableWidgetBox 
	{
			float:left;
			width: 250px !important; 
	}

Open in new window

screenshot2.png

AWSHelpdesk

ASKER

and this doesn't work either, same results

#Module1786_TableWidgetBox
	{
			float:left;
			width: 250px !important; 
	}
	 
	#Module1787_TableWidgetBox 
	{
			float:left;
			width: 250px !important; 
	}

Open in new window

Fero45

You should put <TABLE ....> into <DIV>. You cannot move it by itself
<DIV style='float: left; width: 250px;>
<TABLE...>
</DIV>

This must work

AWSHelpdesk

ASKER

Unfortunately I can't because the page is built via a CMS and the structure comes from there :(

Fero45

Then the table cannot be aligned from within the table tag. It must be enclosed in <DIV> ..<?DIV>

AWSHelpdesk

ASKER

So you can't wrap two tables onto one line without enclosing them in a div?

Fero45

DIV will hold them together even if you resize the browser. There is another way - to put both tables in a table.

Manish09

Hi AWSHelpdesk,
You can try this ...i hope it will solve ur problem ...if u still find some issue i suggest u to check the width of the table in which u having both table

thanks
Manish

<!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">
 
#Module1786_TableWidgetBox
{
	float:left;
	width:250 !important; /* You can adjust the width in e.g. pixels but there must be enough space for both to fit */
}
 
#Module1787_TableWidgetBox 
{
	float:left;
	width:250 !important; /* You can adjust the width in e.g. pixels but there must be enough space for both to fit */
}
</style>
 
</head>
 
<body>
<table id="Module1786_TableWidgetBox" cellspacing="0" cellpadding="0" border="0" >
	<tr id="Module1786_TRDisplayWidgetBox">
		<td class="clsnormal" style="width:100%"><a name="WidgetTopAnchor1786"></a>
        <div class="widget homepageLinksWidget" id="Widget1786">	<h2>Buy Wine</h2>
            <div class="mainItem">
            <dl>
            <dt><a href="http://wineselectorscmdev.wineselectors.com.au/Wine-Selectors/Quick-Links/Buy-Wine/Clearance-Sale/default.aspx"><span class="mainItemHeading">Clearance Sale</span></a></dt>
            </dl>
            </div>
        </div>
		</td>
	</tr>
</table>   
<table id="Module1787_TableWidgetBox" cellspacing="0" cellpadding="0" border="0" >
	<tr id="Module1787_TRDisplayWidgetBox">
		<td class="clsnormal" style="width:100%"><a name="WidgetTopAnchor1787"></a>
		<div class="widget homepageLinksWidget" id="Widget1787">	<h2>Become a member</h2>
            <div class="mainItem">
            <dl>
            <dt><a href="http://wineselectorscmdev.wineselectors.com.au/Wine-Selectors/Quick-Links/Become-a-member/Benefits/default.aspx"><span class="mainItemHeading">Benefits</span></a></dt>
            </dl>
            </div>
        </div>
		</td>
	</tr>
</table>
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

LordOfPorts

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AWSHelpdesk

ASKER

Hey everyone,, i have tried all of these ideas none of them work, and I really need to have them both on the one line and they both have to be created through the CMS so they end up in the tables.

any other ideas?

AWSHelpdesk

ASKER

I have discovered that the two offending tables are actually on separate rows in a table higher up, is there any hope of getting these two widgets on the 1 line with this structure?

<table id="tblContent1" cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;width:100%;">
	<tr id="Wdgt1855" valign="top">
		<td id="WdgtTD1855" class="clsNormal editableArea contentWdgt" colspan="1" style="white-space:nowrap;">  
			<table border="0" cellpadding="0" cellspacing="0" id="Module1855_TableWidgetBox" style="width:100%">
				<tr id="Module1855_TRDisplayWidgetBox">
					<td class="clsnormal" style="width:100%"><a name="WidgetTopAnchor1855"></a>
                        <div class="widget aeRecipeFeatured" id="Widget1855">	<h2>Recipe of the Week</h2>
                        <div class="mainItem">
                        <a href="http://wineselectorscmdev.wineselectors.com.au/Recipes/Pizza/Pizza-with-Mozzarella--Tomato--Basil---Rocket/default.aspx"><img src="http://wineselectorscmdev.wineselectors.com.au/Images/UserUploadedImages/132/Pizza_thumb.jpg" align="left"></a>
                        <dl>
                        <dt><a href="http://wineselectorscmdev.wineselectors.com.au/Recipes/Pizza/Pizza-with-Mozzarella--Tomato--Basil---Rocket/default.aspx"><span class="mainItemHeading">Pizza with Mozzarella, Tomato, Basil & Rocket</span></a></dt>
                        <dd>Pizza with Mozzarella, Tomato, Basil & Rocket Description
                          <br /><a href="http://wineselectorscmdev.wineselectors.com.au/Recipes/Pizza/Pizza-with-Mozzarella--Tomato--Basil---Rocket/default.aspx"><span class="mainItemMore">More >></span></a>
                        
                        </dd>
                        </dl>
                        </div>
                        </div>
					</td>
				</tr>
			</table>
		</td>
	</tr>
    <tr id="Wdgt1856" valign="top">
		<td id="WdgtTD1856" class="clsNormal editableArea contentWdgt" colspan="1" style="white-space:nowrap;">
			<table id="Module1856_TableWidgetBox" cellspacing="0" cellpadding="0" border="0" style="width:100%">
				<tr id="Module1856_TRDisplayWidgetBox">
					<td class="clsnormal" style="width:100%"><a name="WidgetTopAnchor1856"></a>
                        <div class="widget aeRegionFeatured" id="Widget1856">	<h2>Australia's Wine Regions</h2>
                        <div class="mainItem">
                        <dl>
                        <dt><a href="http://wineselectorscmdev.wineselectors.com.au/About-Wine/Wine-Regions/Mornington-Peninsula/default.aspx"><span class="mainItemHeading">Mornington Peninsula</span></a></dt>
                        </dl>
                        </div>
                        </div>
                    </td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Open in new window