float puts submit button outside of div
You need to trigger the layout of .content-padding
or add a clearing element.
.content-padding {
padding: 10px;
overflow:hidden ; /* minds inside and outside floatting elements, fine if no size given */
}
or a generated clearing element.
.content-padding:after {
content:'';
display:block; /* or whatever else than inline */
clear:both;
}
Learn more about floatting elements : http://css-tricks.com/all-about-floats/
Floating elements within a div, floats outside of div. Why?
The easiest is to put overflow:hidden
on the parent div and don't specify a height:
#parent { overflow: hidden }
Another way is to also float the parent div:
#parent { float: left; width: 100% }
Another way uses a clear element:
<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>
CSS
span.clear { clear: left; display: block; }
button float drops below parent div
I apologize for jumping around. I noticed that even with the reversed divs, the text didn't appear completely centered.
Here is yet another solution (5th example): http://jsfiddle.net/tracyfu/zYzqr/
#method5 {
position: relative;
}
#method5 .submit {
position: absolute;
right: 0;
top: 0;
}
The only problem with this is that if you're not careful, or your text is dynamic, it could collide with the absolutely positioned submit.
Putting button outside form but in the same line of submit button
if you cannot keep your input button ad_search_button inside the form, then you can make it position:absolute
and adjust its top, right, left , bottom properties to come in line with the search_button
.
Otherwise, these are the only two possibilities you got.
- make your entire form
float:left
, which will cause the 'ad_search_button' to come to the right of it. Also in this case, width of the entire form should be less than the total width of the screen, so thatad_search_button
can be accomodated. or you can simply keep your
ad_search_button
inside the form. it should get rendered to the left ofsearch_button
ad_search_button kept inside
- ad_search_button kept outside
make Close button outside of a div
do not use float
instead in your container div use
position :relative;
and in the close box div use these styles
position: absolute;
top: -15px;
right: -15px;
(given the fact that if your close button is 30x30)
How to position submit button beside each other html
Make arrange3 class display inline.
.arrange3{
display: inline;
}
order of buttons changes when floating right. how to fix that?
You could make a container around the 2 buttons and let the container float to the right.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.float-container{
float: right;
}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<div class="float-container">
<button class="btn btnff navbar" type="submit">Button 8</button>
<button class="btn btnff navbar" type="submit">Button 9</button>
</div>
</div>
Related Topics
Play Infinitely Looping Video On-Load in HTML5
Flexbox on Ie11: Image Stretched for No Reason
Aligning Elements Left and Center with Flexbox
Ios7 Font Size Change When Create Nsattributedstring from HTML
Style and Script Tags in HTML Body... Why Not
Is There a Reason to Use a Instead of A:Link or A:Visited in My Stylesheet
Absolute Position and Overflow:Hidden
It Is Possible to Expand a Textarea Only with CSS
Do HTML5 Script Tag Need Type="Javascript"
Any Way of Using Frames in HTML5
100% Width Minus Margin and Padding
Flexbox with Fixed Header and Footer and Scrollable Content
How to Remove the Top Margin in a Web Page
How to Space These Images Inside of a Bootstrap 3 Grid System