i tried to line my header elements up using css display:inline and inline-block, but nothing i do wo-CodePudding

No matter what I attempt, I cannot seem to get the divisions within the header element to line up instead of stack. I wanted the logo to float left, while the social media icons and the search bar float left. Also, I want the search bar icon (magnifying glass) to also fall inline with the text area.

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Maj's Php Project 2022</title>
        
        <!-- Jquery Link -->
        
        <!-- CSS Stylesheet Link -->
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
        
        
        <!-- Bootstrap Links -->
                
        <!-- Metadata Information -->
        
        <!-- Website Comment Information -->
        
    </head>
    
    <body>
       <div id="wrapper">
        <header>
            
            <div id="logo">
            
            </div>
            
            <div id="social-media-icons">
            
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                
            </div>
            
            <div id="search-bar">
            <img src="img/search.png" width="25px" height="25px" />
            <form action="#" method="POST">
                <input type="text" placeholder="Search" name="search" id="search" />
                <input type="submit" value="GO" name="submit" id="submit" />
            
            </form>
            </div>
            
            
            
            
            
            <nav>
                <ul>
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li>
                </ul>
            </nav>
        
        </header>

And here is the CSS:

   /* GLOBALS */



/* ELEMENT */

    body {
        background-color: white; 

    }
    
    header {
        width: 960px;
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        
    }
    
    main {
        background-color: #33FF99;
        border-radius: 15px;
        padding: 10px;
        color: #330099;
    }
    
    li {
        display: inline;
        padding: 5%;
    }
    
    li > a {
        text-decoration:none;
        color: #33CC99;
    }
    
    li > a:hover {
        color: #330066;
    }


    footer {
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        color: #33CC99;
    }
    
    header {
        display: inline-block;
        
    }
    
/* IDS */
    
    #wrapper {
        
        border-radius: 15px;
        
        width: 960px;
        clear: both;
        margin: 0 auto;
        padding-top: 5px;
    }
        
    #logo {
        width: 100px;
        height: 100px;
        margin: 5px;
        margin-top: 5px; 
        background-color: white;
        border-radius: 15px;
    }   
    
    #search-bar {
        display: inline;
        float: right;
    }
    
    #social-media-icons {
        float: right;
    }


/* CLASSES */

I need all the divs in the to align inline, but floating the elements is not working. What am I missing! PLease and thank you.

CodePudding user response：

You may wish to make it easier on yourself and utilize either Bootstrap or Flexbox because those tools can help you with alignment desires. With Bootstrap, you'll need to include external resources like bootstrap css; with Flexbox, it's already there. My preference is Flexbox because it provides more flexibility.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I mocked up a quick example using your code and making slight additions and modifications. I also presume you wanted the social media icons and the search functionality to float "right" instead of "left". If not, that's easy enough to change.

HTML

<body>
  <div id="wrapper">
    <header>
      <div >
        <div id="logo"></div>

        <div >
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
        </div>

        <div >
          <form action="#" method="POST">
            <img src="img/search.png" />
            <input type="text" placeholder="Search" name="search"  />
            <input type="submit" value="GO" name="submit" id="submit"  />
          </form>
        </div>
      </div>

      <nav>
        <ul>
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li>
        </ul>
      </nav>

    </header>
  </div>
</body>

CSS

/* GLOBALS */



/* ELEMENT */

body {
  background-color: white;
}

header {
  width: 960px;
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
}

main {
  background-color: #33FF99;
  border-radius: 15px;
  padding: 10px;
  color: #330099;
}

li {
  display: inline;
  padding: 5%;
}

li > a {
  text-decoration: none;
  color: #33CC99;
}

li > a:hover {
  color: #330066;
}

footer {
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
  color: #33CC99;
}

/* IDS */

#wrapper {
  border-radius: 15px;
  width: 960px;
  clear: both;
  margin: 0 auto;
  padding-top: 5px;
}

#logo {
  width: 100px;
  height: 100px;
  margin: 5px;
  margin-top: 5px;
  background-color: white;
  border-radius: 15px;
}


/* CLASSES */

.header-utility {
  display: flex;
  align-items: center;
}

.social-media-icons {
  flex-grow: 1;
  text-align: right;
  padding-right: 30px;
}

.search-input,
.search-submit {
  padding: 0px;
  height: 25px;
}

Feel free to play around with the mock as you desire. https://jsfiddle.net/9g6ms7pz/