5 Replies - 1035 Views - Last Post: 13 September 2012 - 01:49 PM

#1 camaero  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 12-September 12

How to center multiple fluid divs on same row?

Posted 12 September 2012 - 05:39 PM

Hello,

I'm trying to center 3 fluid divs on a row and I can't seem to get it to work. I'm using dreamweaver CS6 and my page currently looks like this:

Posted Image

I want those divs to be centered. What is the best way to go about doing this?
Is This A Good Question/Topic? 0
  • +

Replies To: How to center multiple fluid divs on same row?

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3476
  • View blog
  • Posts: 10,009
  • Joined: 08-June 10

Re: How to center multiple fluid divs on same row?

Posted 12 September 2012 - 05:41 PM

how did you position those divs?
Was This Post Helpful? 0
  • +
  • -

#3 camaero  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 12-September 12

Re: How to center multiple fluid divs on same row?

Posted 12 September 2012 - 06:32 PM

Basically it's this:

<div id="featuredholder">
  <div id="item1">PRODUCTS SHOWN HERE
  </div>
  <div id="item2">PRODUCTS SHOWN HjERE
  </div>
  <div id="item3">PRODUCTS SHOWN HERE
  </div>
  <div id="item4">PRODUCTS SHOWN HERE
  </div>
  <div id="item5">PRODUCTS SHOWN HERE
  </div>
  <div id="item6">PRODUCTS SHOWN HERE
  </div>
   </div>
  


and:

#item1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.6007%;
	display: block;
}
#item2 {
	clear: none;
	float: left;
	margin-left: 1.0989%;
	width: 32.6007%;
	display: block;
}
#item3 {
	clear: none;
	float: left;
	margin-left: 1.0989%;
	width: 32.6007%;
	display: block;
}
#item4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.6007%;
	display: block;
}
#item5 {
	clear: none;
	float: left;
	margin-left: 1.0989%;
	width: 32.6007%;
	display: block;
}
#item6 {
	clear: none;
	float: left;
	margin-left: 1.0989%;
	width: 32.6007%;
	display: block;
}
#featuredholder {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3476
  • View blog
  • Posts: 10,009
  • Joined: 08-June 10

Re: How to center multiple fluid divs on same row?

Posted 12 September 2012 - 06:52 PM

then your best bet is to reduce the parent block element to the combined width and center that one (e.g. via auto-margins)
Was This Post Helpful? 1
  • +
  • -

#5 camaero  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 12-September 12

Re: How to center multiple fluid divs on same row?

Posted 12 September 2012 - 10:38 PM

Could I also just have them expand to the full width of the page equally? If so, what would be the best way to do so?

Appreciate the help!
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3476
  • View blog
  • Posts: 10,009
  • Joined: 08-June 10

Re: How to center multiple fluid divs on same row?

Posted 13 September 2012 - 01:49 PM

you could try to give the width in percent.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1