CODEWITHSUNDEEP
css
GSto
GSto

Reputation: 42380

Problem with CSS and Floats

I have a box where I am trying to add a button to the bottom right corner, yet when I try to float it right, it ends up outside of the div that I have placed it in. How can I fix this?

Link To Live Example

Code:

    <!doctype html>
<html>
    <head>
        <style>
        #sidebar {
            width: 340px;
            float:left;
        }

        .side_block {
            background-color: #FFFFFF;
            padding:8px;
            margin: 8px;
            border-radius: 12px;
            border: 1px solid #AAAAAA;
        }
        .addLink{
            float:right;
            font-size:12px;
        }   
        </style>
    </head>
    <body>
        <div id="sidebar">
            <div class="side_block">

                        <h4>Files</h4>
                        <ul>
                            <li><a href="#">Original Emails.doc</a></li>
                            <li><a href="#">Homepage Draft.jpg</a></li>
                            <li><a href="#">First_Draft.txt</a></li>
                        </ul>
                        <input type="button" class="addLink" value="+Add File" style="float:right;">
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 71

Answers (3)

Drew Wills
Drew Wills

Reputation: 8446

Try this...

<body>
  <div id="sidebar">
    <div class="side_block">
      <input type="button" class="addLink" value="+Add File" style="float:right;">
      <h4>Files</h4>
      <ul>
        <li><a href="#">Original Emails.doc</a></li>
        <li><a href="#">Homepage Draft.jpg</a></li>
        <li><a href="#">First_Draft.txt</a></li>
      </ul>
    </div>
  </div>
</body>

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38543

Clear your float:

<div class="side_block">

            <h4>Files</h4>
            <ul>
                <li><a href="#">Original Emails.doc</a></li>
                <li><a href="#">Homepage Draft.jpg</a></li>
                <li><a href="#">First_Draft.txt</a></li>
            </ul>
            <input type="button" class="addLink" value="+Add File" style="float:right;">
            <br style="clear: right;" />
</div>

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186762

Add overflow:hidden; zoom:1; to .side_block to clear your float.

Upvotes: 2

Related Questions