CODEWITHSUNDEEP
htmlcss
Tyler
Tyler

Reputation: 322

Center a div with a known width with unknown window size

(Utilizing only css and html for compatibility reasons)

I currently have a menu that I'm including on multiple pages (via object with links targeting parent) and I'm trying to center the div horizontally. Using the width of 969px set and margins it centers properly but when the window size becomes too small the menu vanishes completely.

Here is the code I've constructed so far:

<link href="thestyles.css" rel="stylesheet" media="screen">
<div id='themagic'>
<div class='pipe'>|</div>
<a href='./index.html' target="_top"><div id='navbutton'>Home</div></a> <div class='pipe'>|</div> 
<a href='./HH.html' target="_top"><div id='navbutton'>Heroin Hypothesized</div></a> <div class='pipe'>|</div> 
<a href='./PR.html' target="_top"><div id='navbutton'>Pain Relief</div></a> <div     class='pipe'>|</div> 
<a href='./IPF.html' target="_top"><div id='navbutton'>IPF End-Of-Life Care</div></a> <div class='pipe'>|</div> 
<a href='./HAT.html' target="_top"><div id='navbutton'>Heroin Assisted Treatment</div></a> <div class='pipe'>|</div> 
<a href='./Cited.html' target="_top"><div id='navbutton'>Works Cited</div></a> <div class='pipe'>|</div>
</div>

As well here is the CSS I've constructed: (Note I've gone through many different approaches to this, none of which yielded the correct results, so some of this may be "throw away")

#nav
{
    float:left;
    width:100%;
    height:auto;
    overflow:hidden;
}

#themagic{
width:969px;
margin-left:auto;
margin-right:auto;
}

#navbutton
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    background: #e8edff;
    color: #669;
    display: inline-block;
    vertical-align: middle;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    border-radius: 15px;
    padding: 15px;
    float:left;
    font-size:75%;
}

#navbutton:hover
{
    background:#D0DAFD;
    color:#333399;
}

.pipe
{
    color:#669;
    float:left;
    padding:15px;
}

Upvotes: 0

Views: 63

Answers (3)

eshellborn
eshellborn

Reputation: 11261

You could simply try changing #themagic to a fluid width, for example 100%.

http://jsfiddle.net/eshellborn/AdLcx/

Upvotes: 0

codingrose
codingrose

Reputation: 15699

You have used id navbutton times. IDs cannot be same. They must be unique.

Use class instead.

Try:

#themagic{text-align:center;}
.navbutton,.pipe{display:inline-block;} /* remove float:left*/

NOTE:

inline-block adds white-space between elements. To remove white space, write elements on same line instead of writing them on separate lines.

Change

<div class='pipe'>|</div>
<a href='./index.html' target="_top"><div id='navbutton'>Home</div></a> <div class='pipe'>|</div>..

to

<div class='pipe'>|</div><a href='./index.html' target="_top"><div class='navbutton'>Home</div></a><div....

DEMO here.

Upvotes: 0

scrblnrd3
scrblnrd3

Reputation: 7416

To center a div, just add this css to it

#div{
     margin-left:auto;
     margin-right:auto;

}

Upvotes: 2

Related Questions