0

I'm an inexperienced HTML learner, so please bear with me.

I'm trying to make a <div> (#banner) stay in the center of the browser even if resized; so I figured I would need another <div> as the #container of the entire browser.

#banner needs to extend its width 100% so I had to use the absolute position.

Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.

HTML

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div>
   <div id="banner">
   </div>
</div>
</body>
</html>

CSS

#container{

}
#banner{
    background-color: #e51400;
    height: 400px;
    position: absolute;
    left: 0px;
    right: 0px;
    font-weight: bold;
    text-align: center;
    vertical-align:middle;
}

This is basically what I'm trying to accomplish enter image description here

Do I really need another <div> besides #banner in order to put it in the center ?

Joe Morales
  • 891
  • 2
  • 12
  • 20
  • This really needs a community wiki entry, how many times per week does this question get asked? Duplicate of [How to center div horizontally and vertically](http://stackoverflow.com/questions/10296015/how-to-center-div-horizontally-and-vertically), [expanded info on that technique here](http://www.w3.org/Style/Examples/007/center.en.html#vertical) – steveax Jun 14 '12 at 02:55
  • @steveax - It doesn't need to be centered horizontally (I edited my entry) plus the bigger `
    ` does not have assigned dimensions in contrast with the examples you're referring to. If you're bothered by the repetition of this question, why did you reply anyway? You might as well had answered my questions in the first place instead of looking for links to support your facts. Thank you anyways for the links, I guess.
     – Joe Morales Jun 14 '12 at 03:25
  • Not trying to be mean, but the question of how to center things vertically comes up about daily ;-) I'm not sure what you mean when you say: "`#banner` needs to extend its width 100% so I had to use the absolute position.", block level elements like `div` extend to the width of their container by default. Did you try the technique linked in that w3 page? – steveax Jun 14 '12 at 03:42

1 Answers1

1

Well, I was able to answer my own question due to the tremendous amount of replies I got. Anyways, thanks to this page I was able to tweak the code to how I need it in this case.

Here's my final code:

CSS

 #container {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  overflow: visible;
  background-color:black;
}

#banner {
  height: 400px;
  position: absolute;
  top: -200px; //needs to the negative value of half the height
  left: 0px;
  right: 0px;
  background-color:red;
}
Joe Morales
  • 891
  • 2
  • 12
  • 20