CODEWITHSUNDEEP
htmlcss
Paul Squillace
Paul Squillace

Reputation: 17

Two Div's Are not aligning side by side

I have read almost every post on here about divs not lining up side by side but none of them apply to me.

It seems like I am missing a float:left; on both blocks but for whatever reason, they are not honoring that. If I do float:right; to the right container, then it just pushes the right container under the left container.

So far I have tried css attributes:

float: right and left; display: in-line; display: block; width of both left nav and right container

It seems to me like the "main container" is preventing the right container from moving up but, this div is inside that container. I have also tried z-index, and position.

what am I doing wrong here?

body {
  font-family: Arial, Helvetica, sans-serif !important;
  background: URL("http://www.mscdirect.com/global/application-content/images/header/ribbon-bg-1.gif") repeat-x scroll top left;
  clear: both;
}

#header {}

#content-container {
  width: 961px;
}

.top-container {
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-size: 14px;
  font-weight: bolder;
  margin: 5px 0px 0px 20px;
  padding: 10px 0 18px;
  text-align: center;
  text-transform: uppercase;
}

.reg-text {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 12.5px;
  cursor: pointer;
}

.red-text {
  color: #db403b;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}

.left-container {
  width: 262px;
  border: 1px solid #ccc;
  margin: 20px 0px 0px 20px;
}

.left-nav {
  width: 245px;
  margin-top: 10px;
}

.left-nav-head {
  text-transform: uppercase;
  width: 208px;
  margin: 0px 0px 6px 7px;
  padding: 5px 20px 3px 14px;
  font-size: 12px;
  list-style-image: none;
  color: #fff;
  background: #345599;
}

.left-nav li {
  background: rgba(0, 0, 0, 0) url("http://www.mscdirect.com/global/application-content/images/content/contentArrow2.gif") no-repeat scroll 16px 7px;
  list-style: inside none none;
  margin: 0px 0px 5px 5px;
  padding: 4px 16px 6px 27px;
  font-size: 13px
}

.right-container {
  width: 662px;
  display: block;
}

ul {
  list-style: none;
}

li:nth-child(odd) .prod-text-box {
  float: left;
}

li:nth-child(odd) .prod-img-box {
  position: relative;
  padding-right: 100px;
}

#main-container {
  width: 961px;
  margin: 0px auto;
}

a {
  text-decoration: none;
  color: #2866B1 !important;
  font: bold 12px Arial, Helvetica, sans-serif !important;
  text-decoration: none;
  padding: 5px 0 5px
}

a:hover:visted:link {
  color: #2866B1 !important;
  font: bold 12px Arial, Helvetica, sans-serif !important;
  text-decoration: none;
  padding: 5px 0 5px
}

.product-content {
  float: left;
  border: 1px solid #ccc;
  width: 664px;
  margin-left: 300px
}

.prod-box {
  width: 644px;
  border-bottom: 1px solid #ccc;
  float: left;
  clear: both;
  margin: 0px 0px 10px 13px;
  min-height: 200px;
}

.prod-img-box {
  overflow: hidden;
  margin-top: 20px;
  float: right;
  position: absolute;
}

.prod-text-box {
  width: 272px;
  position: relative;
  float: right;
  clear: both;
}

.prod-title {
  font-size: 26px;
  color: #00337a;
  line-height: 30px;
  text-align: left;
  padding-top: 10px;
  clear: both;
}

.prod-cta {
  color: #2866B1 !important;
  font: bold 12px Arial, Helvetica, sans-serif !important;
  text-decoration: none;
  padding: 5px 0 5px;
  clear: both;
}

</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <!-- IE is not seeing HTML5 tags so I added this to fix that --> <!--[if lt IE 9]> <script> document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('figure');
document.createElement('figcaption');
document.createElement('footer');
</script> <![endif]-->
<div id="main-container">
  <div id="header"><img src="header.png" width="961px" height="144px"></div>
  <div class="top-container">save up to <span class="red-text">25% </span>on orders over <span class="red-text">$249</span> + get free shipping when you order online.<span class="reg-text">&nbsp;&nbsp;&nbsp;&nbsp;enter code:</span> ALL25H <span class="reg-text">click to apply &#9658;</span></div>
  <div id="content-container">
    <div class="left-container">

      <!-- Left Navigation -->
      <div class="left-nav">
        <div class="left-nav-head">Head Protection</div>
        <ul>
          <li>Hard Hats</li>
          <li>Bump Caps</li>
          <li>Welding Helmets</li>
          <li>Face Sheilds</li>
          <li>Winter Liners</li>
        </ul>
      </div>

      <!-- Products Section -->
      <div class="right-container">
        <div class="product-content">
          <ul>
            <li>
              <a name="hardhat"></a>
              <div class="prod-box">
                <div class="prod-text-box">
                  <div class="prod-title">Hard Hats</div>
                  Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
                  <div class="prod-cta"><a href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>&#9658;</span></a></div>
                </div>
                <div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
              </div>
            </li>
            <li>
              <a name="bumpcaps"></a>
              <div class="prod-box">
                <div class="prod-text-box">
                  <div class="prod-title">Bump Caps</div>
                  Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
                  <div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>&#9658;</span></a></div>
                </div>
                <div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
              </div>
            </li>
            <li>
              <a name="bumpcaps"></a>
              <div class="prod-box">
                <div class="prod-text-box">
                  <div class="prod-title">Bump Caps</div>
                  Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
                  <div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>&#9658;</span></a></div>
                </div>
                <div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
              </div>
            </li>
            <li>
              <a name="bumpcaps"></a>
              <div class="prod-box">
                <div class="prod-text-box">
                  <div class="prod-title">Bump Caps</div>
                  Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
                  <div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>&#9658;</span></a></div>
                </div>
                <div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
              </div>
            </li>
            <li>
              <a name="bumpcaps"></a>
              <div class="prod-box">
                <div class="prod-text-box">
                  <div class="prod-title">Bump Caps</div>
                  Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
                  <div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>&#9658;</span></a></div>
                </div>
                <div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 65

Answers (2)

Danny Oosthoek
Danny Oosthoek

Reputation: 23

What @kiaanabal said and a position absolute in your css on the left container would be quite useful too.

.left-container {
  position: absolute;
  width: 262px;
  border: 1px solid #ccc;
  margin: 20px 0px 0px 20px;
  float: left;
  overflow: auto;
}

http://codepen.io/Thrizian/pen/zBOZNE?editors=1100

Upvotes: 0

kiaaanabal
kiaaanabal

Reputation: 384

You currently have your markup set up like this:

<container>
    <left-container>
        <left-nav></left-nav>
        <right-container></right-container>
    </left-container>
</container>

It needs to be:

<container>
    <left-container>
        <left-nav></left-nav>
    </left-container>
    <right-container></right-container>
</container>

The left-container does not span the entire width of the container. From there you add

float: left;

to your left-nav and

float: right;

to your right-container and you should be all set!

Upvotes: 1

Related Questions