Why is this 2-column layout displaying stacked vertically separate rows

Please see jsFidddle:  https://jsfiddle.net/dlearman/w5tz68sm/
dlearman1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are 2 reasons.  First, you are missing a closing quotation mark on the very first div.  Lastly, your classes look like you are trying to use bootstrap but you do not have bootstrap loaded.

<!DOCTYPE html>
<html>
<head>
  <style>
  #cgLogo {
  margin:40px auto 30px auto;
}

#cgPortrait {
 outline:1px #FF00FF dashed;  
}

#cgContact {
  outline:1px blue dashed;    
}

#leftPanel {
  padding:0;
  margin:0;
  outline:1px red dashed;
}

#left2 {
  outline:1px #00FF00 dashed;
}

#windermereBlocK {
  position:relative;
  margin:80px auto 20px auto;
  text-align:center;
}

.bodyCopy {
  font-family:'NimbusSanNov-Med', 'HelveticaNeue-Bold', 'Helvetica-Bold', sans-serif;
  font-size:15px;
  color:#302C25;
  letter-spacing:1px;
  line-height:1.20;
  text-align:left;
}
.bigText {
  font-family:'NimbusSanNov-Bol', 'HelveticaNeue-Bold', 'Helvetica-Bold', sans-serif;
  font-size:22px;
  color:#302C25;
  letter-spacing:2px;
  line-height:1.50;
}

.column-centered {
    display:block;
    float:none;
  text-align:left;           
    margin-right:-4px;   /* inline-block space fix*/
}
  
  </style>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
<div class="row row-fluid">
    <div id="leftPanel" class="col-md-5">
        <div class="row row-fluid">
             <div id="cgPortrait" class="col-md-6">
                   <img src="http://www.pricelearman.com/clients/serenaconstruction/_img/contact/craig_109x125.png" alt="Craig Gaudry portrait" class="img-responsive" />
              </div>
          <div id="cgContact" class="col-md-6" >
               <p class="bodyCopyBold leading1">Craig Gaudry <BR />425.576.5555<BR />craig@gaudry.com<BR />www.gaudry.com
               </p>
          </div>
      </div>      
   </div>    
</div>

</body>
</html>

Open in new window


As a side note, this does not look right
.column-centered {
    display:block;
    float:none;
  text-align:left;           
    margin-right:-4px;   /* inline-block space fix*/
}

Open in new window

You might throw off something?

Also in the latest boostrap, row-fluid I believe should be container-fluid.
0
 
InsoftserviceCommented:
Please update your css file

#cgPortrait {
 outline:1px #FF00FF dashed;
 float:left;
}

#cgContact {
  outline:1px blue dashed;    
 float:right;
}

#leftPanel {
  padding:0;
  margin:0;
  outline:1px red dashed;
  width: 242px; /*optional to display both div with a gap few pixels*/
}
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
While the floats may work, that is already built into bootstrap.  By the classes such as div.row and div.col-md-6 you can see it is http://getbootstrap.com/css/ and his fiddle just was not loading the css (or js).

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.