Solved

center "float left" elements on screen?

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

759 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

21 Experts available now in Live!

Get 1:1 Help Now