0

I am trying to create a page footer with some text on the left, on the right, and centered on the page. I've been following examples such as this and I'm having the same problem with all of them: The content in the center div is centered between the borders of the left and right divs, not centered on the body. That is, if left/right are not the same width then the center is off-center.

I can't use fixed widths because I know neither the content nor the font size. I do know the content will be just a few words each.

I can't use explicit proportional widths either for similar reasons; I don't know the proportions of the content and e.g. the center may be short with a left or right side greater than 1/3 of the page width.

I don't actually have to use divs, I just am because that seems to be the way this is done... but anything that will get me a left + body centered + right aligned footer-style layout will work (as long as it works on all common browsers).

I don't care what happens when contents overlap; they can either overlap, or word-wrap, or do something else ugly.

Currently the closest I've gotten is this CSS:

#left { float:left; }
#right { float:right; }
#center { float:none; text-align:center; }

And this HTML:

<div id="container">
    <div id="left">...</div>
    <div id="right">...</div>
    <div id="center">...</div>
</div>

But I am seeing this (an extreme example):

enter image description here

Here is a fiddle: http://jsfiddle.net/HCduT/

I've tried various combinations of float, display, overflow, and margin, but I can't seem to get this right.

Edit: I've also tried http://jsfiddle.net/nshMj/, recommended by somebody elsewhere, but it's got the same issue (with the disadvantage that I don't really understand what it does).

How do I make the content in the center div aligned to the page, rather than centered between the left and right divs (which have different sizes)?

Community
  • 1
  • 1
Jason C
  • 38,729
  • 14
  • 126
  • 182
  • You mean something like this http://jsfiddle.net/HCduT/3/ ? – Alex Char Jul 05 '14 at 19:58
  • @Alek Thanks. That sort of works, but line-wraps the content of the right side if it is greater than 1/3 the page width (which it can be with short center content). When I removed the word-break from the right it went back to the original problem. – Jason C Jul 05 '14 at 20:10

2 Answers2

1

After some research i ended with this:

html

<body>
    <div id="content">center point V center point</div>
    <div id="container">
        <div id="left">L</div>
        <div id="center">C</div>
        <div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>       
        <br style="clear: left;" />
    </div>
</body>

css

#content {
    text-align:center;
}
#left {
    width:33%;
    float:left;
}
#right {
    width:33%;
    float:left;
    overflow:hidden !important;
}
#center {
    float:left;
    width:33%;
    text-align:center;
}

#container{
    width:100%;
}

fiddle

Alex Char
  • 32,879
  • 9
  • 49
  • 70
  • Thanks. This also almost works except it clips the text in the divs if it is greater than 1/3 the body width. I can set `overflow:visible` on the left and center to make those work, but it doesn't work on the right because the text remains aligned to the left edge of the right div (even if I also add `text-align:right`) and just runs off screen. What I don't understand is why the left and right affect the text position of the center even when the center div is full width (as evidenced by adding `border`); if I could stop the left / right from affecting the layout of the center that could work. – Jason C Jul 05 '14 at 20:23
  • If you set `overflow: scroll;` to the `#right` element? – Alex Char Jul 05 '14 at 20:29
  • [Then it adds a scroll bar when the content is larger than 1/3.](http://jsfiddle.net/K4DRk/) – Jason C Jul 05 '14 at 20:36
  • Still limits the right side to 1/3 of the width and clips. This is deceivingly difficult... – Jason C Jul 05 '14 at 20:55
1

I'm not 100% sure what you're after. Here's what I did get:

  1. You want the left div on the left
  2. You want the right div on the right
  3. You want don't want to limit the width of those to 33%;
  4. You want the center to always be dead center.
  5. You don't care about overlapping content

If I got that right, then try this out: DEMO

CSS:(The color is just so you can distinguish the content, as it overlaps)

#content {
    text-align:center;
}
#container {
    position: relative;
}
#left {
    float:left;
}
#right {
    float:right;
    color: #ccc;
}
#center {
    text-align:center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: red;
}
jme11
  • 17,134
  • 2
  • 38
  • 48
  • Wow, I apologize, I both put this project on hold for a while and didn't notice this answer until now. This is exactly what I was looking for, and makes a lot of sense. Thanks again! – Jason C Nov 08 '14 at 02:20