How to Evenly Distribute Elements in a Div Next to Each Other

How to spread elements horizontally evenly?

Try this (http://jsfiddle.net/BYEw5/):

<div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.

Edit 1:
Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.

Edit 2:
Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}

.container > div:first-child {
    margin-left: 0;
}

How do you put two divs next to each other so they fill up the available space

Have the right div before the left.

<div id="right">
    Right
</div>
<div id="left">
    Left
</div>

Working Example

How to distribute elements evenly inside a div?

Left aligned content looks like this (one or more dots represent a whitespace):

+----------------------------------------------+
|word.word.word.word                           |
+----------------------------------------------+

(1) text-align: justify does not justify the last (or the only) line*. One simple solution is to add a very long word which can only fit on a line of its own:

+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

(2) You want whitespace before the first and after the last word. One simple solution is to add dummy words in order to produce the following result:

+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

The desired result can be achieved by adding additional markup. For example:

.row {    text-align: justify;}.row:after {    display: inline-block;    content: "";    width: 100%;}.box {    display: inline-block;}.dummy {    display: inline-block;}/**** FOR TESTING ****/.row {    margin: 1em 0;    background: #FC0;}.box {    background: #F0C;    width: 4em;    height: 5em;}.box:nth-child(even) {    background: #0CF;    width: 8em;}

<div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="dummy"></div></div><div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="dummy"></div></div><div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="box"></div>    <div class="dummy"></div></div><div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="dummy"></div></div>

CSS two divs next to each other

You can use flexbox to lay out your items:

#parent {  display: flex;}#narrow {  width: 200px;  background: lightblue;  /* Just so it's visible */}#wide {  flex: 1;  /* Grow to rest of container */  background: lightgreen;  /* Just so it's visible */}

<div id="parent">  <div id="wide">Wide (rest of width)</div>  <div id="narrow">Narrow (200px)</div></div>

How to align two divs next to each other without clashing together?

try this

.header {  width: 100%;  border: solid red;}
#trademark {  border: solid green;  width: 20%;  display: flex;}
#logo {  width: 70px;}
#logoName {  float: right;}
#divList {  border: solid black;  width: 50%;  text-align: center;  margin-left: 25%;}
#list li {  display: inline;  margin: 20px;}

<div class="header">  <div id="trademark">    <div class="icon">      <img src="images/coin.png" id="logo">    </div>    <h2 id="logoName">Halo</h2>  </div>  <div id="divList">    <ul id="list">      <li>About</li>      <li>TCH</li>      <li>Partners</li>      <li>Contact</li>    </ul>  </div></div>

position 2 divs next to each other

As showed in my comment and this jsFiddle

Using box-sizing: border-box; will fix a lot of your problems, you can read more about it here: Box Sizing Border Box FTW - Paul Irish

Using a width of 50%, floating and clearing the floats will do perfectly fine and will work responsively (mobiles, tablets) as well.

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
.row:after {  display: table;  content: '';  clear: both;}
.column {  float: left;  width: 50%;  border: 1px solid red;}

<div class="row">  <div class="column">Content, al lot of content. LOTS of content. Wow, this is asdf asd asd asd</div>  <div class="column">Content</div></div>

How can I position two elements close to each other in a flexbox navigation bar

Just wrap img and ul tags in a div and add display flex to it. Hope this help you solve your problem.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Epilogue', sans-serif;
}

.body-container {
    background-color: hsl(0, 0%, 98%);
    height: 100vh;
    width: 100vw;
    max-width: 100%;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .left-element {
display : flex;
}

.navbar-flex  li {
    margin-right: ;
    display: inline-block;
}

.navabar {
    list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href = "style.css" rel = "stylesheet" type = "text/css">
  
  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>
<body>

<div class = "body-container">
  <nav class = "navbar">
  <div class = 'left-element'>
    <img src = "images/logo.svg" alt = "company logo">
    <ul class = "navbar-flex">
      <li><a href = "#">Features</a></li>
      <li><a href = "#">Company</a></li>
      <li><a href = "#">Careers</a></li>
      <li><a href = "#">About</a></li>
    </ul>
    </div>
    
    <div class = "navbar-btn">
    <button class = "btn btn-primary">Login</button>
    <button class = "btn btn-primary">Register</button>
    </div>
  </nav>
  
</div>
</body>
</html>

I have a div section with 3 div items inside and I want them to be spaced evenly using html css

You just need to display the div with class .knowledge-section as flex container like this:

.knowledge-section {
        width: 800px;
        display: flex;
        justify-content: space-between;
    }

How to putting elements next to each other in a div with display flex inline

Change the textarea's min-width 300% to specific px.

.wrap {
   display: inline-flex;
}

.comments{
   margin-right: 10px;
}

.form-control {
   min-width: 300px;
}

.button {
   align-self: end;
}

<div class="wrap">
   <label class="comments" for="comments" >Comments:<br>
           <textarea class="form-control" rows="6" name="comments"></textarea>
   </label>
   <label class="button">
           <input type="submit" value="Submit"/>
           <input type="button" onclick="...'; return false" value="Clean">
   </label>
</div>