Floating two divs side by side

HTML-CSS
1

Can anyone tell my why my code isnt working as intended? I want both divs side by side inside of the header.

Waterproofing Inspector 
<header>
  <div class="headerContact">
    <p id="phoneEmail">Ph: 0497 660 008 &emsp;&emsp; email: michaelanthony@gmail.com</p>
  </div>
  <div class="socialMediaIcons">
    <!-- <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-google"></a>
    <a href="#" class="fa fa-linkedin"></a>
    <a href="#" class="fa fa-youtube"></a> -->
  </div>
</header>

body {
margin: 0;
font-family: ‘Roboto’, sans-serif;
}

/================= header ==================/

header {
width: 100%;
height: 90px;
border-bottom: 1px solid black;
}

.headerContact {
float; left;
width: 50%;
height: 30px;
background-color: #0080ff;
border: 1px solid #0066cc;
border-radius: 0 0 0 30px;
}

.socialMediaIcons {
float: left;
width: 50%;
height: 30px;
background-color: #0080ff;
border-bottom: : 1px solid #0066cc;
}

.fa {
font-size: 30px;
text-align: center;
text-decoration: none;
}

.fa-facebook {
background: #3B5998;
color: black;
}

.fa-google {
background: #dd4b39;
color: black;
}

.fa-linkedin {
background: #007bb5;
color: black;
}

.fa-youtube {
background: #bb0000;
color: black;
}

#phoneEmail {
color: white;
margin: 5px 0 0 40px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36.

2

I think you have a minor typo here

and that border will push you over 50% width unless you declare box-sizing as border-box

3

There’s a typo in the float declaration: a semicolon in place of a colon :slight_smile:

Also, since you are using a float system it’s probably better that you update the boxing-model to border-box.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Side personal note: why don’t you try a more “modern” approach like flexbox or cssgrid? They make writing responsive layout easier

4

Thank you Marmiz!

I’ve been using flexbox and only just started using cssgrid today I just wanted to see how floats work.

I’ve really got to watch my typos haha.