[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

center "float left" elements on screen?

Posted on 2011-03-22
4
Medium Priority
?
328 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

656 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