Getting two div's side by side

Question

Trying to get two div's to line up side by side but having some trouble getting them to connect with each other. This is the design of what im trying to make where it says "We're hiring today" and "Schedule Today".

HTML:

<!DOCTYPE html>

<head>
<title>Merry Maids</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>

<div class="backgroundofdivgreen">
<header>
    <div class="logo"><a href="index.html"><img src="images/logo.jpg"></a></div>    

    <nav>
    <a href="index.html">Home</a>
    <a href="services.html">Services</a>
    <a href="offers.html">Offers</a>
    <a href="people.html">People</a>
    <a href="franchises.html">Franchises</a>
    <a href="reviews.html">Reviews</a>

<div class ="phone">
Call Us Today: &nbsp; <a href="tel:1233457890">(800) Merry Maids</a>
</div>

<div class="media">
        <a href="http://www.twitter.com" target=_blank"><img src="images/twitter.png"></a>
        <a href="http://www.facebook.com" target=_blank"><img src="images/facebook.png"></a>
</div>

<div class="clearboth"></div>   
</header>
</nav>
</div>

<div class="banner"><img src="images/banner.jpg" alt="Merry Maids Banner Image"></div>

<div class="spacer1"></div>

<article>


<div class="wrapper">

<div class="yellow">
<h1>Schedule Appointments</h1>
<p>Our cleaning services are thorough, consistent and customized. If you would like to request a special service, change your cleaning schedule, or skip an area in your home, just let us know! We are happy to fulfill every request in order to exceed your expectations.Merry Maids home cleaning services are available weekly, every other week, monthly or one-time. On every visit, your Merry Maids team dusts, vacuums, washes and sanitizes each room.</p>
</div>
<div class="green">
<h1>We're Hiring Today</h1>
<p>For more than 30 years, our team members have provided reliable service for homeowners like you worldwide. We clean people's homes like they are our own and we treat our team members with the same concern, respect and care we expect them to show our customers. Merry Maids knows that our team members are our greatest asset and we recognize the power of our people.</p>
</div>

CSS:

.clearboth {
    clear:both;
}

.backgroundofdivgreen {
    height: 96px;
    margin: 0px;
    background-color: #39b54a;
}

header {
    width: 980px;
    background-color: #39b54a;
    margin: 0px auto;
}

nav {
    float:right;
    width: 570px;
    text-align: right;
    padding-top:10px;
}

nav a {
    color:white;
    margin: 0px 25px 0px 0px;
    text-decoration:none;
}

nav a:hover {
    color: #fff799;
}

.logo {
    float:left;
}

.phone {
    margin: 40px 0px 0px 130px;
    color: white;
    float:left;
}

.media {
    float: right;
    margin: -23px 30px 0px 0px;
}

.banner {
    height:553px;
    width:1600px;
    margin: 0px auto;
}

.spacer1 {
    height:20px;
    background-color: #39b54a;
    margin: 0px auto;
}

.wrapper {
    margin: 0 auto;
    overflow: hidden;

}

.yellow {
    position:fixed;
    width:800px;
    height:313px;
    background-color: #fff799;
    float:left;
    text-align:right;
}
.green {
    position:fixed;
    width:800px;
    height:313px;
    background-color: #005e20;
    float:right;
}

Possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — Rob, Apr 02 '17 at 02:31

score 0 · Answer 1 · answered Apr 02 '17 at 00:42

0

Remove the position: fixed from the two divs. (position: fixed takes an element out of the document flow so the floats have no effect on them.)

You'll also need to make sure the wrapper has enough width to accommodate the full width of both divs.

answered Apr 02 '17 at 00:42

Chaim

2,109
4
27
48

Getting two div's side by side

1 Answers1