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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

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

Experts Exchange Solution brought to you by

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.