Member Avatar for hbmarar

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

divgap.GIF 7.02 KB
Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 3 Replies
  • 194 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Quick diagnosis: the page is using both tables and DIVs for layout and several HTML tags are orphaned or improperly nested (as pointed out). Block-level DIVs will stack vertically unless you deliberately float them, give them inline-block display, or constrain their widths inside a parent. In the posted template the left column is effectively full width and the main column isn’t floated, so the two will appear one above the other.

Practical fixes (apply one layout strategy and clean the markup):

  • Remove deprecated/unused tags like <center> and any stray <td>/<tr> tags that are outside their tables (the footer contains orphaned table cells). Invalid HTML can break CSS flow.
  • Choose CSS floats or inline-block for columns. Make the container a fixed or max width (the header uses 760px), then give each column a width that fits and float/contain them. Add a clearfix so the parent contains floated children.

Example (replace existing column rules with something like this):

/* contain floats */
#wrapper { width:760px; margin:0 auto; overflow:auto; }

/* left column */
#leftnav { float:left; width:200px; margin-right:20px; }

/* main column */
#content { overflow:hidden; /* or float:right; width:520px; */ }

/* simple clear if you prefer the markup-clear method */
.clear { clear:both; }

Troubleshooting tips: remove any !important hacks and the 100% width on the left column; temporarily add visible borders/backgrounds to each DIV to see how boxes flow; validate the HTML (fix unclosed tags) and inspect computed styles with a DOM inspector (Firebug/DevTools). Once tags are valid and one layout method is used, the columns will sit side-by-side.

Recommended Answers

All 3 Replies

Member Avatar for tgreer

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.

Member Avatar for hbmarar

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.

<?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>
content.GIF 3 KB
Member Avatar for tgreer

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.