Solved

center "float left" elements on screen?

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

776 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