I have the following css style for a div
#central_content {
float:left;
width:697px;
margin:-5px 0px 0px 0px;
padding:0px 0px 0px 0px;
position:relative;
}
Everything displays perfectly on 100% zoom in Google chrome. When i zoom out the contents within this div get messed up, aligning themselves to the left of the page instead of the middle where they were. I'm confused. How do i fix this? Thanks
Is this site online so that we can take a look at the rest of the code?
no its not online. but i paste the rest of the code.
<div id = "main" >
<div id = "heading_text">
<span>Post a New Product</span><br/>
<span style="font-style:italic; font-family:Arial, Helvetica, sans-serif; font-size:12px">you can display an unlimited number of products. <a href="displayhelp.php">Learn more about product display</a></span>
</div>
<div class="top_horizontal_bar" style="margin-top:60px;"></div>
<br/>
<div class="menu_block">
<!-- BEGIN categories menu -->
<div class="hc" id="cat_menu_button"><a href="">Categories</a></div>
<?php require_once('sidebar2.php') ?>
<!-- END categories menu -->
<!--BEGIN featured form -->
<!--END featured form -->
</div>
<div id="productdisplay_content">
<div class="category_select ">Please select a product category and a sub category and click NEXT
</div>
<div id="central_content">// the div that gets messed up on zoom out
<form action="display-product.php" method="post">
<div class="form_left">
<div class="check_label">Category:</div>
<div style="padding:7px 0 0 0;"></div>
<select id="categoriesSelect" >
</select>
<br/><br/>
<div style="padding:17px 0 0 0;"></div>
<div class="check_label">Sub Category:</div>
<div style="padding:7px 0 0 0;"></div>
<select id="subcatsSelect" onChange="getData()">
</select>
</div>
<input value="Next" class="edit_account" name="submitcat" type="submit" style="float:right; margin-top:250px"/>
</form>
<div class="selectedproduct">
<div class="here">You selected:</div>
<!--THIS IS THE DIV TO OUTPUT THE SELECTED ITEM -->
<div class="product_directory blue" id="div1">
<!--<div class="product_directory arrows">»</div>
<div class="product_directory blue" ><!--output should be shown here as well for second select box </div>-->
<div style="margin:0 0 -10px 0;"></div>
</div>
</div>
</div>
</div>
<?php require_once('includes/footer.php') ?>
</div>
</div>
</body>
</html>
I also removed most of the PHP code
Sorry, based on the code above, your content is aligned to the left already... zooming in and out doesnt seem to shift the contents as you are indicating.
Its likely due to the fact that you have other PHP code that generates HTML not included above.
What you may want to do is run access your page via a browser... then you would provide the HTML code that you can access via "View Source". There would not be any PHP code included, only pure HTML that was generated.
this is the code from view source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- BEGIN html -->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<!-- BEGIN head -->
<head>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Title -->
<meta name="description" content="My Clean Web Store" />
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="js/social_js/footer-facebook-code.js"></script>
<!-- End Facebook Box code -->
<!-- BEGIN #main -->
<div id = "main" >
<div id="header">
<!-- BEGIN logo and slogan -->
<div class="logoright">
<div class="logoright_bar"></div>
<div id="pages_menu"><a href="howtobuy.php">Buying</a>
</div>
<div class="logoright_bar"></div>
<div id="productdisplay_content">
<div class="category_select ">Please select a product category and a sub category and click NEXT
</div>
<div id="central_content">
<form action="display-product.php" method="post">
<div class="form_left">
<div class="check_label">Category:</div>
<div style="padding:7px 0 0 0;"></div>
<select id="categoriesSelect" >
</select>
<br/><br/>
<div style="padding:17px 0 0 0;"></div>
<div class="check_label">Sub Category:</div>
<div style="padding:7px 0 0 0;"></div>
<select id="subcatsSelect" onChange="getData()">
</select>
</div>
<input value="Next" class="edit_account" name="submitcat" type="submit" style="float:right; margin-top:250px"/>
</form>
<div class="selectedproduct">
<div class="here">You selected:</div>
<!--THIS IS THE DIV TO OUTPUT THE SELECTED ITEM -->
<div class="product_directory blue" id="div1">
<!--<div class="product_directory arrows">»</div>
<div class="product_directory blue" ><!--output should be shown here as well for second select box </div>-->
<div style="margin:0 0 -10px 0;"></div>
</div>
</div>
</div>
</div>
<!-- BEGIN #footer -->
<div id="footer">
<div class="horizontal_bar" style="margin:0;"></div>
<div class="footer_sbox">
<!--begin about emusale-->
<div class="footer_time"> <img src="styles/Images/timeicon.png" class="timeicon" alt="time" />
<div class="hc footer-title">About emusale</div>
<div style="clear:both; margin:0; padding:0;"></div>
<ul id="category_menu">
<li><a href="aboutpage.php"><span><span>What is EMUsale</span></span></a></li>
<li><a href="contact-page.php"><span><span>Contact Us</span></span></a></li>
<li><a href="help.php"><span><span>Help Center</span></span></a></li>
</ul>
<div class="boxcontainer">
</div>
</div>
<!-- about emusale-->
<!--begin Buying-->
<div class="footer_twitter"><img src="styles/Images/magic_b.gif" class="timeicon" alt="twittericon"/>
<div class="hc footer-title">Buying</div>
<div style="clear:both;"></div>
<ul id="category_menu">
<li><a href="browsecategories.php"><span><span>Browse Categories</span></span></a></li>
<li><a href="howtobuy.php"><span><span>How to Buy</span></span></a></li>
<li><a href="displayhelp.php"><span><span>Product Display Tips</span></span></a></li>
</ul>
<div class="boxcontainer">
</div>
</div>
<!-- Buying-->
<!--begin Selling-->
<div class="footer_facebook"><img src="styles/Images/magic_ss.gif" class="timeicon" alt="facebookicon"/>
<div class="hc footer-title">Selling</div>
<div style="clear:both;"></div>
<ul id="category_menu">
<li><a href="display-product.php"><span><span>Display Products</span></span></a></li>
<li><a href="manage-products.php"><span><span>Manage Products</span></span></a></li>
<li><a href="howtosell.php"><span><span>How to Sell</span></span></a></li>
</ul>
<div class="boxcontainer">
</div>
</div>
<!--begin Selling-->
<div style="clear:both;"></div>
<div class="horizontal_bar" style="margin:0; padding:14px 0 1px 0;"></div>
<!-- BEGIN copyright -->
<div class="copyright">© 2012 <b>Emusale</b> - Buy and Sell</div>
<!-- END copyright --> <!-- BEGIN #footer_menu -->
<ul id="footer_menu">
<li><a href="aboutpage.php" target="_blank">About EMUsale</a><span class="footer_lilbar"></span></li>
<li><a href="http://emu.edu.tr" target="_blank">EMU</a><span class="footer_lilbar"></span></li>
<li><a href="http://stdportal.emu.edu.tr" target="_blank">Student Portal</a><span class="footer_lilbar"></span></li>
<li><a href="contact-page.php">Contact Us</a></li>
<!-- END #footer_menu -->
</ul>
<!-- Credits -->
<div id="credits">Credits by </div>
<!-- END #footer -->
</div>
</div>
</div>
</body>
</html>
I cut out some of the irrelevant code.
Sorry... it doesnt look like I've been much help. The last set of code you posted has no styles (internal/external styles) associated with it so it doesnt render for me as it does in your picture.
I suspect that the issue is related to the use of the float property.
There's no way I can go through your examples to try to figure this out.
Okay..Thank you.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
