Solved

center "float left" elements on screen?

Posted on 2011-03-22
4
323 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

939 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

Need Help in Real-Time?

Connect with top rated Experts

4 Experts available now in Live!

Get 1:1 Help Now