HTML and CSS

div comes vertical when i need it horizontal sideby side as columns

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2005

Posts: 183

Reputation: hbmarar is an unknown quantity at this point

Solved Threads: 0

hbmarar

Offline

Junior Poster

div comes vertical when i need it horizontal sideby side as columns

Oct 20th, 2005

hi,

I am not a expert programmer but would like to play with this.I am findin git strange with the alignment.

I have the following in my code:-

<div id="leftnav"> <?php //some function?> </div>
</td>
<td>
<div id="content"><?php ?></div>

<div id="footer">
</div>

in css file i am having
#leftnav
{
margin-right: 78%!important;
margin-right: 76%;
margin-left: 10px;
margin-top: 0px;
padding: 0;
width: auto!important;
width: 100%;

background-repeat: repeat-y;
background-position: right top;
}
#content {
width: 72%;
float: none;
margin-top: 10px;
padding-right: 10%;
padding-bottom: 1%;
padding-left: 28%;
}

I am also attaching the screen shotpicture for providing a better picture.Hope you might beable to help me.

Thanking you for the concern and consideration

Harish

Attached Thumbnails

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: div comes vertical when i need it horizontal sideby side as columns

Oct 20th, 2005

I notice some table cell tags in there, orphaned: no table row, or table for that matter. You aren't showing us all the relevant code, and that makes it nearly impossible to help you.

•

Join Date: Apr 2005

Posts: 183

Reputation: hbmarar is an unknown quantity at this point

Solved Threads: 0

hbmarar

Offline

Junior Poster

Re: div comes vertical when i need it horizontal sideby side as columns

Oct 21st, 2005

hi,

thanks for the reply. It would be very kind of you if you could help me out of this problem.

I am pasting the code here.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
 <?php echo "<?xml version=\"1.0\"?> "; ?>
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head> 
 
<?php mosShowHead(); ?> 
 
<?php if ( $my-> id ) initEditor(); ?>
 
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?> /templates/alow/css/template_css1.css" rel="stylesheet" type="text/css"/>
 
<!--[if IE 6]> <style type="text/css" title="Site default"> 
 #leftnav {position:relative}</style> <![endif]--> 
</head> 
 
<body> 
<center> 
<div id="wrapper"> 
<div id="main"> 
 
<div id="top" align="right"> <?php mosLoadModules ( 'user3' ); ?> </div> 
 
<div id="header"> 
	<table border="0" width="760" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td>  
	    <div id="logo1"> 
         <img src="<?php echo $mosConfig_live_site;?>/templates/alow/images/logo2.gif" alt="" > 
        </div>
      </td>
 
      <td valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr height="0"><th colspan="2" ></th></tr>
            <tr><td height="15"></td></tr>
             <tr>
<td id="sectd" style="padding-left:10"> <p> <?php mosLoadModules ('user3',-2) ; ?></p></td>
<td><img src="<?php echo $mosConfig_live_site;?> /templates/galow/images/ic-cart.gif" alt="" width="45" height="24" border="0"></td> 
             </tr> 
            <tr> <td height="4"> </td> </tr> 
              <td align="top" colspan="2" style="padding-top:0.5">  
<img src="<?php echo $mosConfig_live_site;?>/templates/galow/images/hd-cart.jpg" alt="" width="538" height="127" border="0"> 
              </td>
            </tr>
			<?php if (mosCountModules('user5')>0) { ?>
			<tr><td style="padding-left:10">
               <?php mosLoadModules ( "user5"); ?>
	        </td></tr>
			 <?php } ?>
         </table>
       </td> 
    </tr>
  </table>	
</div>
 
<div id="content"><?php include_once ("mainbody.php"); ?></div>
<!-- end content -->
 
<div id="leftnav"><?php echo mosLoadSecImage(); ?> 
     <?php echo mosLoadCatImage(); ?> 
     <?php echo mosLoadItemImage(); ?> </div>
<div class="clear"></div>
<!-- end navigation -->
 
</div><!-- end main -->
</div><!-- end wrapper -->
  <div id="footer">
     <td valign="left"><?php mosLoadModules ('user3',-2) ; ?> </td></div>
    </tr>
 
    </table>
    </tr>    
 
	</table>
	<br />
<div id="footerred" align="right">
<img src="<?php echo $mosConfig_live_site;?> /templates/alow/images/ft-call-email.gif" alt="" width="256" height="25" border="0">
    </div> 
</center> 
</body> 
</html> 
 <?php echo "<?xml version=\"1.0\"?>"; ?>
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<?php mosShowHead(); ?>

<?php if ( $my->id ) initEditor(); ?>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/alow/css/template_css1.css" rel="stylesheet" type="text/css"/>

<!--[if IE 6]><style type="text/css" title="Site default">
 #leftnav {position:relative}</style><![endif]-->
</head>

<body>
<center>
<div id="wrapper">
<div id="main">

<div id="top" align="right"><?php mosLoadModules ( 'user3' ); ?></div>

<div id="header">
	<table border="0" width="760" cellpadding="0" cellspacing="0">
    <tr>
      <td> 
	    <div id="logo1">
         <img src="<?php echo $mosConfig_live_site;?>/templates/alow/images/logo2.gif" alt="" > 
        </div>
      </td>
    
      <td valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr height="0"><th colspan="2" ></th></tr>
            <tr><td height="15"></td></tr>
             <tr>
<td id="sectd" style="padding-left:10"> <p> <?php mosLoadModules ('user3',-2) ; ?></p></td>
<td><img src="<?php echo $mosConfig_live_site;?>/templates/galow/images/ic-cart.gif" alt="" width="45" height="24" border="0"></td>
             </tr>
            <tr><td height="4"></td></tr>
              <td align="top" colspan="2" style="padding-top:0.5"> 
<img src="<?php echo $mosConfig_live_site;?>/templates/galow/images/hd-cart.jpg" alt="" width="538" height="127" border="0"> 
              </td>
            </tr>
			<?php if (mosCountModules('user5')>0) { ?>
			<tr><td style="padding-left:10">
               <?php mosLoadModules ( "user5"); ?>
	        </td></tr>
			 <?php } ?>
         </table>
       </td> 
    </tr>
  </table>	
</div>

<div id="content"><?php include_once ("mainbody.php"); ?></div>
<!-- end content -->

<div id="leftnav"><?php echo mosLoadSecImage(); ?> 
     <?php echo mosLoadCatImage(); ?> 
     <?php echo mosLoadItemImage(); ?> </div>
<div class="clear"></div>
<!-- end navigation -->

</div><!-- end main -->
</div><!-- end wrapper -->
  <div id="footer">
     <td valign="left"><?php mosLoadModules ('user3',-2) ; ?> </td></div>
    </tr>
	
    </table>
    </tr>    
	 
	</table>
	<br />
<div id="footerred" align="right">
<img src="<?php echo $mosConfig_live_site;?>/templates/alow/images/ft-call-email.gif" alt="" width="256" height="25" border="0">
    </div>
</center>
</body>
</html>

Last edited by tgreer; Oct 21st, 2005 at 10:57 am. Reason: Placing code in code tags.

Attached Thumbnails

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: div comes vertical when i need it horizontal sideby side as columns

Oct 21st, 2005

I see that you're mixing divs and tables... usually one or the other is used for layout, but not both. The "center" tag is deprecated. Also, your leftname style has width set to 100% and also "auto". I doubt anything could be "side-by-side" with a 100% width block-level element.