ansaurus

Question

Three column <DIV> navigation bar, based on center <DIV>'s width.

Answer 1

+1 A:

Fact is, you do not need the padding <div>. All you need to do is specify an auto horizontal margin, which will automatically expand to grab all the space available (thus centering your content as a side-effect).

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #header-nav {
        width: 100%;
      }

      #header-nav-items {
        margin: 0 auto; /* auto centers */
      }

      #header-nav-items a {
        display: block;
        width: 200px;
        text-align: center;
        background: #f00;
      }
    </style>
  </head>
  <body>
    <div id="header-nav">
      <div id="header-nav-items">
        <a href="#">We are centered!</a>
      </div>
    </div>
  </body>
</html>

Andrew Moore 2010-07-31 04:06:18

great (short and sweet) explanation of what "auto" margin actually does. +1

rockinthesixstring 2010-07-31 04:28:55

@Andrew Moore - This does not center the text since the inner div is a block filling the entire width of the parent block.

Gert G 2010-07-31 04:35:54

@Gert G: true, forgot to give a width to `#header-nav-items` corrected.

Andrew Moore 2010-07-31 04:55:24

A fair enough answer, and I've known about the margin: 0 auto; technique, I use it quite frequently. But I _DO_ want two divs or spans to fill the left and right space so I can add the background of the menu. Think a horizontal white bar, in which I want to cut into the middle to add the links. As I mentioned before, I can not have any overlap, or this would be a simple operation.

Billy Eisert 2010-07-31 23:06:26

@Billy... check out my answer. I think it does what you want.

Hristo 2010-08-06 16:23:42

Answer 2

+1 A:

I think you can try this technique

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

metal-gear-solid 2010-07-31 04:08:55

Answer 3

A:

UPDATE

Here's what I have for 6 list items in your menu: http://jsfiddle.net/23bqz/6/

I think the following would work nicely: http://jsfiddle.net/23bqz/2/

What I've done is float the left <div> to the left, float the right <div> to the right, and then the center <div> is centered by "margin: auto". The key thing here is the order of the <div>s...

left <div>
right <div>
center <div>

I've also made the left and right <div>s a percentage width so that they scale with the size of the screen but in order to avoid the possibility of overlapping the center div, I gave the wrapper a min-width so that after a certain point, it can't get smaller.

Let me know if you have questions. I hope this helps.

Hristo 2010-08-06 16:22:42

Almost, though that requires that I have exactly 2 links both 50px wide. Is there a way to get it to adjust to the width of however many links I put in there?

Billy Eisert 2010-08-23 02:42:43

@Billy... I was under the impression that you were looking for 2 links. I'll take a look at it again and report back.

Hristo 2010-08-23 03:38:15

@Billy... check out my update.

Hristo 2010-08-23 03:52:36

This is turning out to be rather chore-like. I might just convert to a tabular layout and make the links left-aligned with a set indentation in. What my website does is generate the navigation bar depending on where you are or if you're logged in or not, etc. Therefore, I can't really have it set to a fixed width. I could have the link generation also construct the width by multiplying number of links * width, but the buttons vary in width (Eg: Play and Alpha Keygen links obviously won't both agree on a width.)

Billy Eisert 2010-08-24 00:35:10

@Billy... sorry, I tried my best :/

Hristo 2010-08-24 02:26:15

That's fine. It took forever to find the solution... Part of it was my overly-difficult design structure I planned to use.

Billy Eisert 2010-08-26 02:35:29

Answer 4

A:

Ok, I completed the layout using a 3-column table instead. I did not specify a width for the left and right cells and I specified the center cell's width as 0. The center cell stretches to fill the content, and pushes the right two cells away.

Anybody know of any problems with this?

Billy Eisert 2010-08-24 01:09:14

ansaurus

tags:

views:

answers:

Three column <DIV> navigation bar, based on center <DIV>'s width.

UPDATE

related questions