8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

CSS "float" problem (need to center!)

by Theory5
6 replies
So I found a theme I like, and it even has a categories section that I like. However, the way the categories are setup in the CSS stylesheet means that they can only start off from the left or right because I was told "float" doesn't do center. So how would I go about centering the categories?
I was told to use a div container, but I don't know enough about div to make on from scratch.

PC Smarts | Just another WordPress site

thats the website, what I want to center is right under the image.
Here is the code pertaining to the categories, it was taken from the stylesheet. and was the only code I was able to find.
Code:
/* --- Sub Nav --- */
nav#subnav {
 margin:0;
 padding:0;
 overflow: hidden;
}
nav#subnav ul.menu {
 margin: 5px 0 0 0;
 padding:16px 0 30px;
 border-top: 1px solid #ddd;
 overflow: hidden;
}
nav#subnav ul.menu li.menu-item {
 width: 17%;
 margin: auto;
 float: left;
 list-style: none;
}
nav#subnav ul.menu li.menu-item a {
 font-size: .8em;
 text-transform: uppercase;
 font-weight: bold;
}
nav#subnav ul.menu li.menu-item ul.sub-menu {
 margin: 0;
 padding: 6px 0 0;
 overflow: hidden;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
 width: 100%;
 letter-spacing: 0;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item a {
 font-size: .8em;
 font-weight: normal;
 line-height:2;
 text-transform: none;
}
#center #css #float #problem
  • Profile picture of the author xythis
    Code:
    nav#subnav ul.menu li.menu-item {
 width: 33%;
 margin: auto;
 float: left;
 list-style: none;
 text-align: center;
}
    By assigning the width 33%, you're telling each of those category columns to take up a third of the width of its container, and then using text-align center you're telling the text to be centered in each column.

    You can squeeze the columns in tighter together by adding:

    Code:
    nav#subnav ul.menu li.menu-item ul.sub-menu {
 margin: 0;
 padding: 6px 0 0;
 overflow: hidden;
 width: 75%;
}
    or any other percentage of the page's width.
    {{ DiscussionBoard.errors[5984079].message }}
  • Profile picture of the author solidsoul
    margin: auto 0 auto 0 but your missing a CSS element here that is the wrap can you show me the code for the wrap element
    Signature
    {{ DiscussionBoard.errors[5984100].message }}
  • Profile picture of the author Theory5
    Great thanks! I just have one more problem, when I add a new category, it appears under networking, rather than next to networking. Does this have something to do with the width command in the first peice of code you gave me Xythis?
    {{ DiscussionBoard.errors[5984114].message }}
    • Profile picture of the author xythis
      Originally Posted by Theory5 View Post

      Great thanks! I just have one more problem, when I add a new category, it appears under networking, rather than next to networking. Does this have something to do with the width command in the first peice of code you gave me Xythis?
      Yes, you would want to change the width from 33 to 25. With a fourth column it becomes 33 x 4.. which doesn't fit in that space. Thus, the last column will get pushed to below. Each column should have an equal share of the full 100%, so just divide the number of columns you need from 100.
      {{ DiscussionBoard.errors[5984139].message }}
  • Profile picture of the author Theory5
    Cool. Seems a bit clunky to have to get around float just to center something, I wonder why float doesn't just have a "center" command. Anyways thanks for the help I appreciate it!
    {{ DiscussionBoard.errors[5984156].message }}
    • Profile picture of the author xythis
      Originally Posted by Theory5 View Post

      Cool. Seems a bit clunky to have to get around float just to center something, I wonder why float doesn't just have a "center" command. Anyways thanks for the help I appreciate it!
      No problem. Float doesn't have a center value because it was originally intended to place images in a field of text and have the text wrap around it. In this scenario, you usually want to have the image floating in the upper right or upper left side of the text area. Having text flow around both sides of the object doesn't really make much sense, and what would happen if you had multiple objects floated center?

      There are better ways to design a page with multiple columns of text such as that in your theme, but for the sake of flexibility (the theme needs to let you have any number of columns you want), the author chose to float the lists.

      Cheers
      {{ DiscussionBoard.errors[5984199].message }}

Trending Topics