Solved

center "float left" elements on screen?

Posted on 2011-03-22
4
326 Views
Last Modified: 2012-05-11
I have three equally sized DIVs on my screen, floating left so they are next to each other. How is it possible to center these three items? Here is my page:

http://www.sterlingmodular.com/v2/racking-systems.asp

This seems like it should be simple to do. Relevant portions of my CSS and HTML are attached. Thank you!
div.planseriesbox {
		margin: 0px;
		padding: 0px 10px 10px 0px;
		width: 169px;
		height: 145px;
		float: left;
	}

<div class="planseriesbox">
	<a href="racking-systems-one-bay.asp">
	<div class="planseriescontainer"><img src="art/ph_racking-systems2.jpg" width="169" height="145" border="0" />
		<p class="planseries"><span class="blue">One Bay Racks &gt;</span></p>
	</div>
	</a>
</div>

<div class="planseriesbox">
	<a href="racking-systems-two-bay.asp">
	<div class="planseriescontainer"><img src="art/ph_racking-systems1.jpg" width="169" height="145" border="0" />
		<p class="planseries"><span class="blue">Two Bay Racks &gt;</span></p>
	</div>
	</a>
</div>

<div class="planseriesbox">
	<a href="racking-systems-face-up.asp">
	<div class="planseriescontainer"><img src="art/ph_racking-systems3.jpg" width="169" height="145" border="0" />
		<p class="planseries"><span class="blue">"Face-Up" Rack &gt;</span></p>
	</div>
	</a>
</div>

<div class="clear"></div>

Open in new window

0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 35189533
The best way is to wrap all of those in a div that's just wide enough to hold all 3 and then give that a margin:0px auto.

So something like this:

<div id="center-wrap" style="margin:0px auto;width:600px;">
<div class="planseriesbox"> content </div>
<div class="planseriesbox"> content </div>
<div class="planseriesbox"> content </div>
</div><!--end center-wrap-->

Open in new window

0
 

Author Comment

by:bbdesign
ID: 35189802
OK, that works:

div.center {
            margin: 0px auto;
            width: 537px;
      }

http://www.sterlingmodular.com/v2/racking-systems.asp

However, it seems I have to specify the exact width of the DIV in order to get it exactly centered? So I can't reuse this class elsewhere in the site unless the contents are also exactly 537px wide? It would be nice if there could be a generic centering DIV that I could reuse. But perhaps not possible?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 35189821
This is a very simplistic solution based on your issue.  To be able to do something custom like that over and over, you may have to use percentages and I'm not sure it would work correctly.  Generally when centering a div on a page we use an exact width and margin:0 auto.  Even if you were to use a percentage, it would be difficult to get it right every time because of the varying widths.
0
 

Author Comment

by:bbdesign
ID: 35189923
That's what I kind of figured. Thanks for the info!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question