CSS Float Problems

Question

I'm having a problem with the floating property.

I want it to look this way: printscreen

What can I do, I want the button to NOT float like the other two elements above the button.

My css: (You can see my HTML on JSFiddle)

#upload_photo_form > p {
    margin: 3px;
}

#upload_one {
    width: 150px;
    height: 60px;
    background-image: url('image, doesnt matter, looke the same anyways');
    background-size: 100%;
    float: left;
    border: 1px solid grey;
    border-radius: 3px;
}

#upload_two {
    margin-left: 5px;
    width: 150px;
    height: 60px;
    background-image: url('image, doesnt matter, looke the same anyways');
    border: 1px solid grey;
    border-radius: 3px;
    background-size: 100%;
    float: left;
}

et voila jsfiddle.net/btNL3

Rachel Gallen
– Rachel Gallen

2014-07-01 22:29:32 +00:00
Commented Jul 1, 2014 at 22:29 — Rachel Gallen
– Rachel Gallen, Commented Jul 1, 2014 at 22:29

Alexander Bell · Accepted Answer · 2014-07-01 22:21:58Z

1

You cam modify your code as follows:

<div id="upload_photo_form">
    <div>
        <p>Please choose a file to upload.</p>
        <input id="upload_file" type="file" /><br>
   </div>
   <div>
        <p>Which mode would you like to use?</p>
        <div id="upload_one"></div>
        <div id="upload_two"></div>
   </div>

</div>
 <div style="clear:both;"></div>
 <button id="upload_button">Upload</button>

answered Jul 1, 2014 at 22:21

Alexander Bell

7,9263 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Bell Over a year ago

You are welcome. Best of luck with your project! Rgds,

imbondbaby · Accepted Answer · 2014-07-01 22:23:23Z

1

Try this:

#upload_button{
    margin-top:10px;
    clear: both;
}

DEMO

You can also use:

display: block;

answered Jul 1, 2014 at 22:23

imbondbaby

6,4313 gold badges23 silver badges54 bronze badges

Comments

ralph.m · Accepted Answer · 2014-07-01 22:28:34Z

0

Try this if you want to do this just with CSS:

#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}

answered Jul 1, 2014 at 22:28

ralph.m

14.4k4 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

CSS Float Problems

3 Answers 3

1 Comment

DEMO

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related