CODEWITHSUNDEEP
cssfirefoxcss-floatborderoverlap
Rena
Rena

Reputation: 3943

CSS Float border overlap issues

I'm trying to float a menu to the left of the page, and when it gets large enough to reach the content below, Firefox bumps the content over exactly as it should... except for the border.

Here is a screenshot with a few items:

https://i.sstatic.net/o56aZ.png

And another with several items

https://i.sstatic.net/J7MGB.png

"Box 4" gets moved over as expected, but its border stays at the left. O.o

#menu {
    float: left;
    width: 100px;
    padding-left: 0px;
}

#menu ul {
    margin: 0px;
    padding: 10px;
}

#title {
    margin-left: 100px;
    border: 1px #F00 dashed;
    height: 40px;
    font-size: 20pt;
}

#title_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#container {
    margin-left: 100px;
}

.topbox {
    width: 30%;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 2px;
    margin: none;
    border: 1px #F00 solid;
}

.topbox .title {
    text-align: center;
    border-bottom: 1px #000 solid;
    padding-top: 1px;
}

.content {
    padding: 2px;
}

#box4 {
    border: 1px #000 solid;
    width: 100%;
}

#box4 .title {
    display: inline;
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
    padding-left: 2px;
    padding-right: 2px;
}

#box4 .content {
    display: inline;
}
  <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">Title</span>
            </div>
            <div id="container">
                <div id="box1" class="topbox">
                    <div class="title">Box 1 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">Box 2 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">Box 3 Title</div>
                    <div class="content">Content goes here</div>
                </div>
            </div>
            <div id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
        </body>
    </html>

Upvotes: 4

Views: 8411

Answers (6)

Pravin Prajapati
Pravin Prajapati

Reputation: 131

you have missed the box4 outside of container. you can check below snippet.

#menu {
    float: left;
    width: 100px;
    padding-left: 0px;
}

#menu ul {
    margin: 0px;
    padding: 10px;
}

#title {
    margin-left: 100px;
    border: 1px #F00 dashed;
    height: 40px;
    font-size: 20pt;
}

#title_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#container {
    margin-left: 100px;
}

.topbox {
    width: 30%;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 2px;
    margin: none;
    border: 1px #F00 solid;
}

.topbox .title {
    text-align: center;
    border-bottom: 1px #000 solid;
    padding-top: 1px;
}

.content {
    padding: 2px;
}

#box4 {
    border: 1px #000 solid;
    width: 100%;
}

#box4 .title {
    display: block;
    border-right: none;
    border-bottom: 1px #000 solid;
    padding-left: 0px;
    padding-right: 0px;
    text-align:center;
    
}

#box4 .content {
    display: inline;
}
<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">Title</span>
            </div>
            <div id="container">
                <div id="box1" class="topbox">
                    <div class="title">Box 1 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">Box 2 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">Box 3 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
            </div>
            
        </body>
    </html>

Upvotes: 0

Tor Valamo
Tor Valamo

Reputation: 33749

box4 should have a clear:both; property in its css. It should do the trick. I just tested it and it does what you want.

#box4 {
    border: 1px #000 solid;
    width: 100%;
    clear:both;
}

Upvotes: 2

Rob
Rob

Reputation: 15160

I think you'll not be able to do this with css alone because you're fighting the normal flow. Elements normally are stacked on top of each other and trying to ask one to move out of the way as you go down the page is not how this works.

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You could float the #box4 to the left..

It would not however have the 100% width ..

As you udnerstand this is not fixable, since the 100% width will always mess something up.. you cannot have it at 100% width but not take up 100% when pushed...

Upvotes: 0

Logesh Paul
Logesh Paul

Reputation: 7700

Include the below line above "box4" div. 

<div style="clear:both;"></div>

So that your code should look like below :

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4">
 <div class="title">Box 4 Title</div>
 <div class="content">Content goes here<br />line break</div>
</div>

Cheers !!!

Upvotes: 0

Pat
Pat

Reputation: 25675

You can fix that by updating your #box4 rule like so:

#box4 {
   border: 1px #000 solid;
   margin-left: 100px;
}

Edit #box4 below a long sidenav css:

#box4 {
   border: 1px #000 solid;
   clear: both;
}

Upvotes: 0

Related Questions