Float Puts Submit Button Outside of Div

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 that ad_search_button can be accomodated.
  • or you can simply keep your ad_search_button inside the form. it should get rendered to the left of search_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



Leave a reply



Submit