1

I am unable to move a div (.searchblock). I would like it to be centered in the header.

Side question: Is there an easy way to get the contents of the header and the body aligned to the same width?

On the div in question, I have tried position: fixed, absolute, relative. I have tried centering the div with margin: auto, and various other values. I have tried moving the div in all directions (position: absolute, top: 50px, right 100-1000px, etc.) as well. Nothing seems to have an effect on it's positioning. 

html {
  background-color: #e9ebee;
}

body {
  margin: 0;
}

.header {
  background-color: #4267B2;
  #4267b width: 100%;
  height: 42px;
}

#search {
  color: gray;
  height: 24;
}

input[type=image] {
  height: 24;
  padding: 0px;
}

.searchblock {
  position: absolute;
  left: 1000px;
}

#profile {
  border-radius: 10px;
}

ul,
.bttn {
  color: white;
  list-style-type: none;
  display: inline-block;
}

li {
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 0 10px 1px;
  border-right: solid 1px gray;
}

button {
  border: none;
  padding: 0;
  margin: 0;
}

.footer {
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: #2851A3;
  margin: 0;
}
<div class="header">
  <div class="searchblock"></div>
  <img id="logo" src="facebook.png" height="24" width="24">

  <input id="search" type="text" name="search" value="search">
  <input type="image" name="submit" src="maglass.png">
  <img id="profile" src="blacwhit.jpg" height="24" width="24">
  <ul>
    <li>Create</li>
    <li>Find Friends</li>
    <li>Home</li>
    <li>Anthony</li>
  </ul>

  <div class="bttn">
    <button type="button"><img src="messages.png"height="24" width="24"> 
    </button>
    <button type="button"><img src="frequest.png"height="24" width="24"> 
    </button>
    <button type="button"><img src="alerts.png"height="24" width="24"> 
    </button>
    <button type="button"><img src="acct.png"height="24" width="24"></button>
    <button type="button"><img src="help.png"height="24" width="24"></button>
    <button type="button"><img src="dropdown.png"height="24" width="24"> 
    </button>
  </div>
</div>

I would like the DIV to be centered in the header.

user9408899
  • 4,202
  • 3
  • 19
  • 32
Anthony M
  • 51
  • 1
  • 6
  • `.searchblock` have no child or text, so it have no width, its not possible to see this div when rendered, so why to center it? Also, to use `position:absolute` and the positional properties (`top`, `left`, etc), you need to add `position:relative` to the `.header`, so the absolute positioned element will respect the parent's limits, otherwise it will use the body as limit – Calvin Nunes Aug 30 '19 at 13:03
  • I had the header set to relative, and took it out as part of my troubleshooting, but your suggestion did not work. The div (.searchblock) contains the nav bar and the buttons, which is what I'm trying to center ultimately. Thanks, regardless. – Anthony M Aug 30 '19 at 13:13
  • actually, the code you show here, `.searchblock` is empty, `
    ` but anyway, you found a solution     – Calvin Nunes Aug 30 '19 at 13:17
  • @AnthonyM `.searchblock` is an **empty** `
    ` in your code.
     – hungerstar Aug 30 '19 at 13:18

2 Answers2

3

I would like the DIV to be centered in the header.

You can use flexbox to center elements. Like this:

.header {
  background-color: #4267B2;
  width: 100%;
  height: 42px;

  display: flex;
  justify-content: center;
  align-items: center;
}
hungerstar
  • 21,206
  • 6
  • 50
  • 59
user9408899
  • 4,202
  • 3
  • 19
  • 32
0

Try this code.. it will work for cross broswers too..

css

.header {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
Manikandan2811
  • 831
  • 4
  • 9