Width set automatically

HTML & CSS
1

The code below at http://dot.kr/x-test/layOut/05/ has width:400px.


#navigator {
[COLOR="#FF0000"]width:400px;[/COLOR]
[COLOR="#0000FF"]padding:2px 10px 2px 10px;[/COLOR]
border:1px solid #555;
margin:auto;
background:#fff;
}

I don’t like to fix the width as 400px.
I like to make it the background:#fff box can be automatically set by the length of the text ( (navigator) sun > earth > asia (ancestors of Korea ) inside the navigator box as the code above has padding:2px 10px 2px 10px;,.

If I remove width:400px; like the code below at http://dot.kr/x-test/layOut/06/ which has not width:400px. the white navigator box spreads to the end.

How can I make the white navigator box to be centered with padding:2px 10px 2px 10px;?

2

Set a percentage width and make sure there’s enough room to accomodate the padding and margins as padding + margin + border + width = total width.

#navigator {
width:96%;
padding:2px 10px;
border:1px solid #555;
margin:auto;
background:#fff;
}
3

As I apply your code, the result of it at http://dot.kr/x-test/layOut/07/ shows the width of padding-right is bigger than 10px.
How can I make the width of padding-right in the white navigator box 10 px?

I like to put the white navigator box in the center of the green horizontal box.

4

The padding for the container is 10px on each side and not bigger. If you set the width to 96 (or some other) percentage, then that’s the width you’ll get…

Anyway, if you don’t want the <div> container to expand to the available width and not set some kind of value for it, then you can change its display to inline or inline block. That way, the container will always be as wide as its content. And if you want the whole thing centered, then add text-align:center to the parent.

#navigatorWrap {
margin:0 1px;
border:1px solid #555;
background:#ffff88;
padding:5px 0;
text-align:center;
}

#navigator {
display:inline;
padding:2px 10px;
border:1px solid #555;
background:#fff;
}
5

Thank you, kohoutek. it works fine.