Text won't stay centered within box on overflow

Question

I can't seem to make text stay centred in a container if it overflows that container. In my example, it's a horizontal menu within a fluid layout. It works fine until the browser window is shrunk sufficiently for the text to overflow. Once this happens, it no longer stays centred, but rather overlaps only to the right.

How can I make it stay centred, even when it has to overflow its container?

Here's my code:

<style type="text/css">

#access {
    background: #e2e2e2;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
}

#access div {
    width: 100%
    margin-left:auto;
    margin-right:auto;
}

#access ul {
    font-size: 0.9em;
    list-style: none outside none;
    display: inline-block;
    width: 100%;
    text-align: center;
}

#access li {
    width: 15%;
    position: relative;
    margin-right: 1%;
    float: left;
}

#access a {
    color: #fff;
    width: 62%;
    margin-left:auto;
    margin-right:auto;
    background: #CB2027;
    display: inline-block;
    line-height: 2.2em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.2em;
    padding: 0px 1em;
    white-space: nowrap;
}
</style>
<nav id="access" role="navigation"> 

<div class="menu-test-menu-container"><ul id="menu-test-menu" class="menu">
<li id="menu-item-29"><a href="http://google.com/">Home</a></li>
<li id="menu-item-30"><a href="http://google.com/">Item 1</a></li>
<li id="menu-item-31"><a href="http://google.com/">Long item</a></li>
<li id="menu-item-32"><a href="http://google.com/">Item 3</a></li>

</ul></div></nav>

And here it is live: http://jsfiddle.net/Psymz/

Mr_Green · Accepted Answer · 2013-03-05T13:02:03.500

0

Give min-width property to #access. Something like this:

#access{
     min-width: 1024px; /* low resolution value */
}

Working Fiddle (resize window to check)

edited Mar 05 '13 at 13:02

answered Mar 05 '13 at 12:35

Mr_Green

40,727
45
159
271

Thank you - but is it possible to solve this while still allowing #access to resize, to keep fluid layout? – James Mar 05 '13 at 12:40
@james give everything in percentages including padding, margin... Thats what I think. Let me check. – Mr_Green Mar 05 '13 at 12:41
@james you should atleast give `min-width` to `li` if not to `#access`. and also use `word-wrap: break-word;` instead of `white-space: nowrap;`, that could help you some. – Mr_Green Mar 05 '13 at 12:49
@James Check this [**fiddle**](http://jsfiddle.net/Psymz/2/). I am not sure about cross browser support. – Mr_Green Mar 05 '13 at 12:52
Thanks, but I'm afraid I need it not to line-break – James Mar 05 '13 at 12:56
@james then I suggest to use `min-width` to `nav`(#access), as I mentioned in my answer. – Mr_Green Mar 05 '13 at 12:57
Thank you - but if I do that then the resizing is lost, which I'd like to keep. Am I applying incorrectly? `#access li {min-width: 120px;}` – James Mar 05 '13 at 13:04
@james Sorry, apply `min-width` to `#access`. I thought it would work the same for `li`. – Mr_Green Mar 05 '13 at 13:06
@james try giving padding in percentages in `a`. Something like this: `padding: 0px 10% 0px 10%;` – Mr_Green Mar 05 '13 at 13:12
@mr-green No worries - unfortunately applying `min-width` to `access` seems to allow the resizing (good!) but also wrapping (bad...) (like so - `#access {min-width: 80%;}`) – James Mar 05 '13 at 13:12
1

@james Happy that you solved on your own. :) (Not sure how you did that but `min-width` in percentages doesn't make any sense while resizing..) – Mr_Green Mar 05 '13 at 13:18
@mr-green unfortunately I haven't I don't think! Having the problem with wrapping. – James Mar 05 '13 at 13:26
Ah, but putting `min-width` in pixels seems to have helped! Thanks for the tip. – James Mar 05 '13 at 13:27
@James ok.. please mark it as answer if my solution solved your problem. :) – Mr_Green Mar 05 '13 at 14:43

Text won't stay centered within box on overflow

1 Answers1