Avatar of Michael Vasilevsky
Michael VasilevskyFlag for United States of America asked on

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

CSSBootstrap

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
David S.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Julian Hansen

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
ASKER
Michael Vasilevsky

I appreciate the extra info Julian! That clarifies things
David S.

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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Julian Hansen

Understood, I was referring to
 next to non-floated elements, including inline elements in a line