Bootstrap CSS Override

How can I get my image and getFile on the same row? I must be missing something...

JSFiddle

<form class="center-block form-horizontal">
  <div class="form-group row">
    <label class="col-sm-12 col-md-2 col-form-label" for="getFile">Image:</label>
    <div class="col-sm-12 col-md-10">
      <a href="#image">
        <img class="thumbnail" src="https://www.arborday.org/images/hero/medium/hero-ring-of-trees-looking-up.jpg">
      </a>
      <input class="form-control input-lg" id="getFile" style="width:80%; display:inline; float:right;" type="file">
    </div>
  </div>
</form>

Open in new window

LVL 11
Michael VasilevskySolutions ArchitectAsked:
Who is Participating?
 
David S.Commented:
Floated elements don't float up, next to non-floated elements, including inline elements in a line box above them. One solution is to float that thumbnail.
.form-group .thumbnail {
	float: left;
}

Open in new window

P.S. That's not a Bootstrap issue.
0
 
Julian HansenCommented:
Change your .thumbnail class to
.thumbnail {
  display: inline-block;
    max-width: 10%;
}

Open in new window

0
 
Julian HansenCommented:
With respect to the accepted answer
Floated elements don't float up, next to non-floated elements, including inline elements in a line box above them
This is not correct. Consider the following code
<html>
<head>
<style type="text/css">
div {
	float: right;
	
}
</style>
</head>
<body>
<a>Non floated inline element</a>
<div>Floated block element</div>
</body>
</html>

Open in new window

Will produce the output ss148.jpg
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Michael VasilevskySolutions ArchitectAuthor Commented:
I appreciate the extra info Julian! That clarifies things
0
 
David S.Commented:
Julian, you're right. I was misremembering how that works these days. I was describing the old behavior which was changed years ago. IE7 and Firefox 3.0 show the old way that was handled. Thanks for correcting me.

Although come to think of it, I wasn't talking about a plain inline element; I was talking about one that had a child with display:block (as in the Fiddle). I should have been clearer what I was talking about. So really, we're both correct and the code suggestion we each made had the same affect.
0
 
Julian HansenCommented:
Understood, I was referring to
 next to non-floated elements, including inline elements in a line
0
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.