CODEWITHSUNDEEP
css
Martezz
Martezz

Reputation: 35

CSS Float Problems

I'm having a problem with the floating property.

My code: JSFiddle

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;
}

Upvotes: 0

Views: 572

Answers (3)

ralph.m
ralph.m

Reputation: 14365

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

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

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

Try this:

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

DEMO

You can also use:

display: block;

Upvotes: 1

Alexander Bell
Alexander Bell

Reputation: 7918

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>

Upvotes: 1

Related Questions