How to display a form & Image inline

  • HI,
    I am trying to get a form & an image to display side by side in the header of a website, but no matter what I do they seem to stack on top of each other.

    This is the code I am using… What am I missing??
    Thanks

    <img src="https://www.salesseoandsocialmedia.com/wp-content/uploads/kaylene-grieve-e-book-download-2.png">
<style type="text/css">
.beta-base .preheader, .beta-base .header, .beta-base .sidebar, .beta-base .body, .beta-base .footer, #mainContent {
    text-align: right;
display: inline;
}
.beta-base .preheader, .beta-base .header, .beta-base .body, .beta-base .sidebar, .beta-base .leftSidebar, .beta-base .rightSidebar, .beta-base .footer {
    margin: 0;
    padding: 0;
    border: none;
    white-space: normal;
    line-height: normal;
}
.beta-base .title, .beta-base .subtitle, .beta-base .text, .beta-base img {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    white-space: normal;
    line-height: normal;
}
.beta-base .bodyContainer td.preheader{
    padding: 10px 0;
}
.beta-base .bodyContainer td.header {
    padding: 0;
    height: 30px;
}
.beta-base .bodyContainer td.body, .beta-base .bodyContainer td.footer,
.beta-base .bodyContainer td.sidebar, .beta-base .bodyContainer td.leftSidebar, .beta-base .bodyContainer td.rightSidebar {
    padding: 20px;
}
.beta-base .bodyContainer td.header p, .beta-base .bodyContainer td.preheader p, .beta-base .bodyContainer td.body p,
.beta-base .bodyContainer td.footer p, .beta-base .bodyContainer td.sidebar p,
.beta-base .bodyContainer td.leftSidebar p, .beta-base .bodyContainer td.rightSidebar p {
    margin: 0;
    color: inherit;
}
.beta-base .bodyContainer td.header div.title, .beta-base .bodyContainer td.preheader div.title, .beta-base .bodyContainer td.body div.title,
.beta-base .bodyContainer td.footer div.title, .beta-base .bodyContainer td.sidebar div.title,
.beta-base .bodyContainer td.leftSidebar div.title, .beta-base .bodyContainer td.rightSidebar div.title,
.beta-base .bodyContainer td.header div.subtitle, .beta-base .bodyContainer td.preheader div.subtitle, .beta-base .bodyContainer td.body div.subtitle,
.beta-base .bodyContainer td.footer div.subtitle, .beta-base .bodyContainer td.sidebar div.subtitle,
.beta-base .bodyContainer td.leftSidebar div.subtitle, .beta-base .bodyContainer td.rightSidebar div.subtitle,
.beta-base .bodyContainer td.header div.text, .beta-base .bodyContainer td.preheader div.text, .beta-base .bodyContainer td.body div.text,
.beta-base .bodyContainer td.footer div.text, .beta-base .bodyContainer td.sidebar div.text,
.beta-base .bodyContainer td.leftSidebar div.text, .beta-base .bodyContainer td.rightSidebar div.text {
    overflow: auto;
}
.beta-base .optout {
    margin-bottom: 10px;
    margin-top: 10px;
}
div.infusion-captcha {
    width: 220px;
    padding: 10px;
}
div.infusion-captcha input, div.infusion-captcha select, div.infusion-captcha textarea {
    width: 95%;
    display: inline;
    vertical-align: middle;
}
table.infusion-field-container td.infusion-field-input-container input[type='text'],
table.infusion-field-container td.infusion-field-input-container input[type='password'],
table.infusion-field-container td.infusion-field-input-container textarea {
    width: 98%; /* must be 98% to make the snippet-menu line up due to border width */
    margin: 0;
}
table.infusion-field-container td.infusion-field-input-container select {
    width: 101%;
    *width: 102%; /* this one for IE */
    margin: 0;
}
table.infusion-field-container td.infusion-field-label-container {
    padding-right: 0px;
}
td.header .image-snippet img {
    vertical-align: centre;
display: inline;
}
#webformErrors {
    color: #990000;
    font-size: 14px;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.infusion-form {
display: inline;
    margin: 0;
    height: 100%;
}
.infusion-option {
    display: block;
    text-align: left;
}
</style>
<style type="text/css">
.beta-font-b h1, .beta-font-b h2, .beta-font-b h3, .beta-font-b h4, .beta-font-b h5, .beta-font-b h6 {
    font-family: arial,sans-serif;
}
.beta-font-b h1 {font-size: 24px;}
.beta-font-b h2 {font-size: 20px;}
.beta-font-b h3 {font-size: 14px;}
.beta-font-b h4 {font-size: 12px;}
.beta-font-b h5 {font-size: 10px;}
.beta-font-b h6 {font-size: 8px;}
.beta-font-b address {font-style: italic;}
.beta-font-b pre {font-family: Courier New, monospace;}
.beta-font-b .title, .beta-font-b .title p {
    font-size: 20px;
    font-weight: bold;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .subtitle, .beta-font-b .subtitle p {
    font-size: 11px;
    font-weight: normal;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .text, .beta-font-b p {
    font-size: 12px;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .preheader .text, .beta-font-b .preheader .text p {
    font-size: 11px;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .footer a {
    font-size: 11px;
    font-family: arial,sans-serif;
}
.beta-font-b .footer .text {
    font-size: 10px;
    font-family: verdana,sans-serif;
}
.beta-font-b .sidebar .title, .beta-font-b .leftSidebar .title, .beta-font-b .rightSidebar .title {
    font-size: 15px;
    font-weight: bold;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .sidebar .subtitle, .beta-font-b .leftSidebar .subtitle, .beta-font-b .rightSidebar .subtitle {
    font-size: 12px;
    font-family: arial, sans-serif;
align: left;
}
.beta-font-b .sidebar .text, .beta-font-b .sidebar .text p, .beta-font-b .leftSidebar .text, .beta-font-b .rightSidebar .text {
    font-size: 11px;
    font-family: arial, sans-serif;
align: left;
}
.infusion-field-label-container {
    font-size: 14px;
    font-family: arial,sans-serif;
}
.infusion-field-input-container {
    color: #000000;
    font-size: 12px;
}
.infusion-option label {
    color: #000000;
    font-size: 14px;
    font-family: arial,sans-serif;
}
</style>
<style type="text/css">
.simple .background {
    background-color: #FFFFFF;
}
.simple .body {
    background-color: #FFFFFF;
}
.simple a {
    color: #0645AD;
}
.simple .text {
    color: #000000;
}
.simple .background .preheader a {
    color: #0645AD;
}
.simple .background .preheader .text {
    color: #1A242E;
}
.simple .header {
    background-color: #FFFFFF;
}
.simple .title {
    color: #1A242E;
}div
.simple .subtitle {
    color: #000000;
}
.simple .sidebar .title {
    color: #000000;
}
.simple .leftSidebar .title {
    color: #000000;
}
.simple .rightSidebar .title {
    color: #000000;
}
.simple .sidebar .subtitle {
    color: #000000;
}
.simple .leftSidebar .subtitle {
    color: #000000;
}
.simple .rightSidebar .subtitle {
    color: #000000;
}
.simple .footer {
    background-color: #FFFFFF;
}
.simple .footer a {
    color: #0645AD;
}
.simple .footer .text {
    color: #000000;
}
.simple .infusion-field-label-container {
    color: #000000;
    font-size: 14px;
    font-family: arial, sans-serif;
}
.simple .infusion-field-input-container {
    color: #000000;
    font-size: 12px;
}
.simple .infusion-option label {
    color: #000000;
    font-size: 14px;
    font-family: arial, sans-serif;
}
.simple .webFormBodyContainer{
    border-style:Hidden;
    border-color:#000000;
    border-width:0px;
}
</style>
<style type="text/css">
.infusion-field-label-container {
align:Right;
}
.infusion-field-label-container {
vertical-align:Middle;
}
.infusion-field-input-container {
width:100px;
}
.bodyContainer {
width:425px;
}
</style>
<script src="https://no188.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=eb0ca40154e955932bb2b88a5e7c136b" type="text/javascript">
</script>
<form accept-charset="UTF-8" action="https://no188.infusionsoft.com/app/form/process/322aa1597a485e89f4c87b38f46c5cfb" class="infusion-form" method="POST" name="10 mistakes Lead Capture" onsubmit="var form = document.forms[0];
var resolution = document.createElement('input');
resolution.setAttribute('id', 'screenResolution');
resolution.setAttribute('type', 'hidden');
resolution.setAttribute('name', 'screenResolution');
var resolutionString = screen.width + 'x' + screen.height;
resolution.setAttribute('value', resolutionString);
form.appendChild(resolution);
var pluginString = '';
if (window.ActiveXObject) {
    var activeXNames = {'AcroPDF.PDF':'Adobe Reader',
        'ShockwaveFlash.ShockwaveFlash':'Flash',
        'QuickTime.QuickTime':'Quick Time',
        'SWCtl':'Shockwave',
        'WMPLayer.OCX':'Windows Media Player',
        'AgControl.AgControl':'Silverlight'};
    var plugin = null;
    for (var activeKey in activeXNames) {
        try {
            plugin = null;
            plugin = new ActiveXObject(activeKey);
        } catch (e) {
            // do nothing, the plugin is not installed
        }
        pluginString += activeXNames[activeKey] + ',';
    }
    var realPlayerNames = ['rmockx.RealPlayer G2 Control',
        'rmocx.RealPlayer G2 Control.1',
        'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)',
        'RealVideo.RealVideo(tm) ActiveX Control (32-bit)',
        'RealPlayer'];
    for (var index = 0; index < realPlayerNames.length; index++) {
        try {
            plugin = new ActiveXObject(realPlayerNames[index]);
        } catch (e) {
            continue;
        }
        if (plugin) {
            break;
        }
    }
    if (plugin) {
        pluginString += 'RealPlayer,';
    }
} else {
    for (var i = 0; i < navigator.plugins.length; i++) {
        pluginString += navigator.plugins[i].name + ',';
    }
}
pluginString = pluginString.substring(0, pluginString.lastIndexOf(','));
var plugins = document.createElement('input');
plugins.setAttribute('id', 'pluginList');
plugins.setAttribute('type', 'hidden');
plugins.setAttribute('name', 'pluginList');
plugins.setAttribute('value', pluginString);
form.appendChild(plugins);
var java = navigator.javaEnabled();
var javaEnabled = document.createElement('input');
javaEnabled.setAttribute('id', 'javaEnabled');
javaEnabled.setAttribute('type', 'hidden');
javaEnabled.setAttribute('name', 'javaEnabled');
javaEnabled.setAttribute('value', java);
form.appendChild(javaEnabled);">
<input name="inf_form_xid" type="hidden" value="322aa1597a485e89f4c87b38f46c5cfb" /><input name="inf_form_name" type="hidden" value="10 mistakes Lead Capture" /><input name="infusionsoft_version" type="hidden" value="1.31.0.28" />
<div class="simple beta-base beta-font-b" id="mainContent" style="height:100%">
<table cellpadding="0" cellspacing="0" class="background" style="width: 100%; height: 100%">
<tbody>
<tr>
<td align="left" valign="top">
<table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="bodyContainer webFormBodyContainer" width="100%">
<tbody>
<tr>
<td bgcolor="#FFFFFF" class="body" sectionid="body" valign="top">
<div class="text" id="webformErrors" name="errorContent">
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_FirstName">First Name *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; text-align:right;">
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" />
</td>
</tr>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_LastName">Last Name *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; align:right;">
<input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_Email">Email *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; align:right;">
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_Phone1">Mobile *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; align:right;">
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div style="height:15px; line-height:15px;">
?
</div>
</div>
<div>
<div class="infusion-submit" style="text-align:left;">
<button style="" type="submit" value="Submit">Submit</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</form>

Viewing 8 replies - 1 through 8 (of 8 total)

  • Try using floats?

    Thread Starter BoldbyDesign

    (@boldbydesign)

    Are you talking about the plugin for floats??

    Is it possible to paste your link here? It’s easier for me to take a look at it that way. ??

    Thread Starter BoldbyDesign

    (@boldbydesign)

    Hi,

    Sorry I had to put the code back in again before copying the link.
    Basically this is the page:
    https://www.salesseoandsocialmedia.com/

    The element that is not right is the top right item. I want the form to side to the right of the image of the book & the arrow…

    I didn’t set it up originally so I’m a bit lost at to where to make that happen in this case!

    Thanks again for any help you can offer.
    Cheers,
    Angie

    add your image and form inside <div> tag and give them a unique class like:

    <div id="header-banner">
			<div class="header-banner-image"><img src="https://www.salesseoandsocialmedia.com/wp-content/uploads/kaylene-grieve-e-book-download-2.png" ></div>
<style type="text/css">
.beta-base .preheader, .beta-base .header, .beta-base .sidebar, .beta-base .body, .beta-base .footer, #mainContent {
    text-align: left;
}
.beta-base .preheader, .beta-base .header, .beta-base .body, .beta-base .sidebar, .beta-base .leftSidebar, .beta-base .rightSidebar, .beta-base .footer {
    margin: 0;
    padding: 0;
    border: none;
    white-space: normal;
    line-height: normal;
}
.beta-base .title, .beta-base .subtitle, .beta-base .text, .beta-base img {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    white-space: normal;
    line-height: normal;
}
.beta-base .bodyContainer td.preheader{
    padding: 10px 0;
}
.beta-base .bodyContainer td.header {
    padding: 0;
    height: 30px;
}
.beta-base .bodyContainer td.body, .beta-base .bodyContainer td.footer,
.beta-base .bodyContainer td.sidebar, .beta-base .bodyContainer td.leftSidebar, .beta-base .bodyContainer td.rightSidebar {
    padding: 20px;
}
.beta-base .bodyContainer td.header p, .beta-base .bodyContainer td.preheader p, .beta-base .bodyContainer td.body p,
.beta-base .bodyContainer td.footer p, .beta-base .bodyContainer td.sidebar p,
.beta-base .bodyContainer td.leftSidebar p, .beta-base .bodyContainer td.rightSidebar p {
    margin: 0;
    color: inherit;
}
.beta-base .bodyContainer td.header div.title, .beta-base .bodyContainer td.preheader div.title, .beta-base .bodyContainer td.body div.title,
.beta-base .bodyContainer td.footer div.title, .beta-base .bodyContainer td.sidebar div.title,
.beta-base .bodyContainer td.leftSidebar div.title, .beta-base .bodyContainer td.rightSidebar div.title,
.beta-base .bodyContainer td.header div.subtitle, .beta-base .bodyContainer td.preheader div.subtitle, .beta-base .bodyContainer td.body div.subtitle,
.beta-base .bodyContainer td.footer div.subtitle, .beta-base .bodyContainer td.sidebar div.subtitle,
.beta-base .bodyContainer td.leftSidebar div.subtitle, .beta-base .bodyContainer td.rightSidebar div.subtitle,
.beta-base .bodyContainer td.header div.text, .beta-base .bodyContainer td.preheader div.text, .beta-base .bodyContainer td.body div.text,
.beta-base .bodyContainer td.footer div.text, .beta-base .bodyContainer td.sidebar div.text,
.beta-base .bodyContainer td.leftSidebar div.text, .beta-base .bodyContainer td.rightSidebar div.text {
    overflow: auto;
}
.beta-base .optout {
    margin-bottom: 10px;
    margin-top: 10px;
}
div.infusion-captcha {
    width: 220px;
    padding: 10px;
}
div.infusion-captcha input, div.infusion-captcha select, div.infusion-captcha textarea {
    width: 95%;
    display: block;
    vertical-align: middle;
}
table.infusion-field-container td.infusion-field-input-container input[type='text'],
table.infusion-field-container td.infusion-field-input-container input[type='password'],
table.infusion-field-container td.infusion-field-input-container textarea {
    width: 98%; /* must be 98% to make the snippet-menu line up due to border width */
    margin: 0;
}
table.infusion-field-container td.infusion-field-input-container select {
    width: 101%;
    *width: 102%; /* this one for IE */
    margin: 0;
}
table.infusion-field-container td.infusion-field-label-container {
    padding-right: 0px;
}
td.header .image-snippet img {
    vertical-align: bottom;
}
#webformErrors {
    color: #990000;
    font-size: 14px;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.infusion-form {
    margin: 0;
    height: 100%;
}
.infusion-option {
    display: block;
    text-align: left;
}
</style>
<style type="text/css">
.beta-font-b h1, .beta-font-b h2, .beta-font-b h3, .beta-font-b h4, .beta-font-b h5, .beta-font-b h6 {
    font-family: arial,sans-serif;
}
.beta-font-b h1 {font-size: 24px;}
.beta-font-b h2 {font-size: 20px;}
.beta-font-b h3 {font-size: 14px;}
.beta-font-b h4 {font-size: 12px;}
.beta-font-b h5 {font-size: 10px;}
.beta-font-b h6 {font-size: 8px;}
.beta-font-b address {font-style: italic;}
.beta-font-b pre {font-family: Courier New, monospace;}
.beta-font-b .title, .beta-font-b .title p {
    font-size: 20px;
    font-weight: bold;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .subtitle, .beta-font-b .subtitle p {
    font-size: 11px;
    font-weight: normal;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .text, .beta-font-b p {
    font-size: 12px;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .preheader .text, .beta-font-b .preheader .text p {
    font-size: 11px;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .footer a {
    font-size: 11px;
    font-family: arial,sans-serif;
}
.beta-font-b .footer .text {
    font-size: 10px;
    font-family: verdana,sans-serif;
}
.beta-font-b .sidebar .title, .beta-font-b .leftSidebar .title, .beta-font-b .rightSidebar .title {
    font-size: 15px;
    font-weight: bold;
    font-family: arial,sans-serif;
align: left;
}
.beta-font-b .sidebar .subtitle, .beta-font-b .leftSidebar .subtitle, .beta-font-b .rightSidebar .subtitle {
    font-size: 12px;
    font-family: arial, sans-serif;
align: left;
}
.beta-font-b .sidebar .text, .beta-font-b .sidebar .text p, .beta-font-b .leftSidebar .text, .beta-font-b .rightSidebar .text {
    font-size: 11px;
    font-family: arial, sans-serif;
align: left;
}
.infusion-field-label-container {
    font-size: 14px;
    font-family: arial,sans-serif;
}
.infusion-field-input-container {
    color: #000000;
    font-size: 12px;
}
.infusion-option label {
    color: #000000;
    font-size: 14px;
    font-family: arial,sans-serif;
}
</style>
<style type="text/css">
.simple .background {
    background-color: #FFFFFF;
}
.simple .body {
    background-color: #FFFFFF;
}
.simple a {
    color: #0645AD;
}
.simple .text {
    color: #000000;
}
.simple .background .preheader a {
    color: #0645AD;
}
.simple .background .preheader .text {
    color: #1A242E;
}
.simple .header {
    background-color: #FFFFFF;
}
.simple .title {
    color: #1A242E;
}div
.simple .subtitle {
    color: #000000;
}
.simple .sidebar .title {
    color: #000000;
}
.simple .leftSidebar .title {
    color: #000000;
}
.simple .rightSidebar .title {
    color: #000000;
}
.simple .sidebar .subtitle {
    color: #000000;
}
.simple .leftSidebar .subtitle {
    color: #000000;
}
.simple .rightSidebar .subtitle {
    color: #000000;
}
.simple .footer {
    background-color: #FFFFFF;
}
.simple .footer a {
    color: #0645AD;
}
.simple .footer .text {
    color: #000000;
}
.simple .infusion-field-label-container {
    color: #000000;
    font-size: 14px;
    font-family: arial, sans-serif;
}
.simple .infusion-field-input-container {
    color: #000000;
    font-size: 12px;
}
.simple .infusion-option label {
    color: #000000;
    font-size: 14px;
    font-family: arial, sans-serif;
}
.simple .webFormBodyContainer{
    border-style:Hidden;
    border-color:#000000;
    border-width:0px;
}
</style>
<style type="text/css">
.infusion-field-label-container {
align:Left;
}
.infusion-field-label-container {
vertical-align:Middle;
}
.infusion-field-input-container {
width:100px;
}
.bodyContainer {
width:425px;
}
</style>
<script src="https://no188.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=eb0ca40154e955932bb2b88a5e7c136b" type="text/javascript">
</script>
<div class="header-banner-form"><form accept-charset="UTF-8" action="https://no188.infusionsoft.com/app/form/process/322aa1597a485e89f4c87b38f46c5cfb" class="infusion-form" method="POST" name="10 mistakes Lead Capture" onsubmit="var form = document.forms[0];
var resolution = document.createElement('input');
resolution.setAttribute('id', 'screenResolution');
resolution.setAttribute('type', 'hidden');
resolution.setAttribute('name', 'screenResolution');
var resolutionString = screen.width + 'x' + screen.height;
resolution.setAttribute('value', resolutionString);
form.appendChild(resolution);
var pluginString = '';
if (window.ActiveXObject) {
    var activeXNames = {'AcroPDF.PDF':'Adobe Reader',
        'ShockwaveFlash.ShockwaveFlash':'Flash',
        'QuickTime.QuickTime':'Quick Time',
        'SWCtl':'Shockwave',
        'WMPLayer.OCX':'Windows Media Player',
        'AgControl.AgControl':'Silverlight'};
    var plugin = null;
    for (var activeKey in activeXNames) {
        try {
            plugin = null;
            plugin = new ActiveXObject(activeKey);
        } catch (e) {
            // do nothing, the plugin is not installed
        }
        pluginString += activeXNames[activeKey] + ',';
    }
    var realPlayerNames = ['rmockx.RealPlayer G2 Control',
        'rmocx.RealPlayer G2 Control.1',
        'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)',
        'RealVideo.RealVideo(tm) ActiveX Control (32-bit)',
        'RealPlayer'];
    for (var index = 0; index < realPlayerNames.length; index++) {
        try {
            plugin = new ActiveXObject(realPlayerNames[index]);
        } catch (e) {
            continue;
        }
        if (plugin) {
            break;
        }
    }
    if (plugin) {
        pluginString += 'RealPlayer,';
    }
} else {
    for (var i = 0; i < navigator.plugins.length; i++) {
        pluginString += navigator.plugins[i].name + ',';
    }
}
pluginString = pluginString.substring(0, pluginString.lastIndexOf(','));
var plugins = document.createElement('input');
plugins.setAttribute('id', 'pluginList');
plugins.setAttribute('type', 'hidden');
plugins.setAttribute('name', 'pluginList');
plugins.setAttribute('value', pluginString);
form.appendChild(plugins);
var java = navigator.javaEnabled();
var javaEnabled = document.createElement('input');
javaEnabled.setAttribute('id', 'javaEnabled');
javaEnabled.setAttribute('type', 'hidden');
javaEnabled.setAttribute('name', 'javaEnabled');
javaEnabled.setAttribute('value', java);
form.appendChild(javaEnabled);" >
<input name="inf_form_xid" type="hidden" value="322aa1597a485e89f4c87b38f46c5cfb"><input name="inf_form_name" type="hidden" value="10 mistakes Lead Capture"><input name="infusionsoft_version" type="hidden" value="1.31.0.28">
<div class="simple beta-base beta-font-b" id="mainContent" style="height:100%">
<table cellpadding="0" cellspacing="0" class="background" style="width: 100%; height: 100%">
<tbody>
<tr>
<td align="left" valign="top">
<table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="bodyContainer webFormBodyContainer" width="100%">
<tbody>
<tr>
<td bgcolor="#FFFFFF" class="body" sectionid="body" valign="top">
<div class="text" id="webformErrors" name="errorContent">
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_FirstName">First Name *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; text-align:left;">
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text">
</td>
</tr>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_LastName">Last Name *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; align:left;">
<input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_Email">Email *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; align:left;">
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_Phone1">Mobile *</label>
</td>
<td class="infusion-field-input-container" style="width:100px; align:left;">
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div style="height:15px; line-height:15px;">
?
</div>
</div>
<div>
<div class="infusion-submit" style="text-align:left;">
<button style="" type="submit" value="Submit">Submit</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
  </form></div>			</div>

    and add the following code in your stylesheet:

    .header-banner-image{
float: left;
width: auto;
display: inline-block;
}

.header-banner-form{
display: inline-block;
float: right;
}

    Thread Starter BoldbyDesign

    (@boldbydesign)

    It worked! Thank you so much! Will save this on file for my reference for later too!

    Thanks again!

    Thread Starter BoldbyDesign

    (@boldbydesign)

    resolved.

    Thread Starter BoldbyDesign

    (@boldbydesign)

    Hi CMSHelpLive

    It worked when I did it, but when I went back and checked a couple of hours later the items on the top right are now sitting partly under the logo and really spread out – it the form boxes are really far away from the words… Is there a way I can compact it so that it all sits up next to the logo??

    Thanks again!
    Angie

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to display a form & Image inline’ is closed to new replies.