Three column <DIV> navigation bar, based on center <DIV>'s width
Question
What I am trying to accomplish is a navigation bar that is center-aligned, padded on both sides with a left and right padding div.
The actual navigation bar is currently an inline-block div containing my tags for links and a left and right transition image, which will lead into the background of the navigation bar to take up the remaining space.
Normally, I would center the navigation bar in a 100% width div and use that wide div as the background, but since I am using semi-transparent .png files, I can't overlap like that.
The layout I would like:
Image of layout showing the three DIVs http://i28.tinypic.com/3451y6c.png (Click image to view full size.)
I updated this question to include an actual image of what I am working with. Currently I set the three <div> s (Technically, the center is a <UL> ) to fixed widths, but I would like to add the flexibility of adding/removing links, and it will expand and shrink the <div> s accordingly. As I said earlier, I cannot center-align the center links and overlap them on the background because I am using semitransparent .png files for the images.
2 answers
solution1
1 2010-07-31 04:06:18
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>
solution2
0 2010-08-24 01:09:14
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.