• Locked
1 reply [Last post]
Tue, 2013-04-09 07:26
ttremain
ttremain's picture
Offline
newbie
Last seen: 10 years 7 weeks ago
Timezone: GMT-7
Joined: 2013-04-09
Posts: 1
Points: 2

I am not new to coding, or HTML, but my CSS is poor. Coming up with site aesthetics was
never my forte'.

I'm having troubles with a custom page on a wordpress layout. Since you cannot access the
dynamic page directly right now, I have made an HTML copy of the page for reference here

This page is made up of several div "tiles". Tables are easier for me, but I cannot make
tables responsive. I want the number of divs in a row to change based on the width of the
browser. I have succeeded there, but I cannot get the tiles to center in the container div.

I do not expect the final row to center.. In fact I'd prefer it to stay to the left, under the tiles above, but it's not mandatory.

Thank you in advance for looking!

Top
Tags:
Wed, 2013-04-10 19:02
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Try this:#morph_container {

Try this:

#morph_container {
  margin: 0 auto;
  text-align: center;
  width: 90%;
  }
 
div .tiles {
  display: inline-block;
  height: 200px; /* You can drop the height property since
                    the elements create an anonymous inline
                    box. */
  margin: 5px;
  vertical-align: top;
  width: 170px;
  }

See Inline-block gallery for some background. Ignore the final section of the article, as being outdated. (I really need to update so many pages since IE decided to become standards compliant.)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked