CSS floats & Overlapping boxes

Question

I've been messing with CSS, trying to understand floats, etc. Here is what the issue looks like:

CSS float overlapping

As you can see, the yellow box floats behind the gray and past it. How do I make it stop right before box Two? Here is my code:

<style>
/*resests begin*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    /*vertical-align: baseline; */
    font-weight:normal;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
/*resests end*/


body {
    font-size:16px;
    margin:5px;

}

h1 {font-size:2em;}

nav {
    background-color:#ccc;
    padding:5px;
    width:200px;
    height:200px;
    margin:10px;
}

#a {
    background-color:#FFC;
    padding:10px;
}

.r-set {
    padding-left:10px;
    float:right;
}


</style>
</head>

<body>
<h1>Title</h1>

<nav class="r-set">
  <p><a href="#">Two</a></p>
</nav>

<div id="a">
  <h3>One</h3>
</div>

</body>
</html>

and if possible create image that you want it exactly, so that we can understand better — Chandrakant, Feb 06 '13 at 04:36
And here is my jsfiddle: http://jsfiddle.net/8pX9s/ (never heard of it, hope you can see it) — tuco, Feb 06 '13 at 04:49
possible duplicate of [Why does CSS float not change the width of the following div?](http://stackoverflow.com/questions/25475822/why-does-css-float-not-change-the-width-of-the-following-div) — Hashem Qolami, Aug 24 '14 at 21:47
Use `overflow-x: hidden` on your leftmost (non-floated) element, and everything will pop into place. — TheDudeAbides, Apr 27 '22 at 15:57

score 3 · Answer 1 · answered Jan 05 '20 at 16:53

3

Apply overflow: hidden; to the non-floating box.

answered Jan 05 '20 at 16:53

M. Volf

1,259
11
29

Most straightforward way to go. This was the solution I used. – TheDudeAbides Apr 27 '22 at 15:57

symlink · Accepted Answer · 2013-02-06T05:56:48.083

When you float an element you take it out of the flow of the DOM. To make it interact with Box One, you need to float Box One as well:

#a {
    background-color: #FFFFCC;
    float: left;
    padding: 10px;
    width: 190px;
}

Notice the width is specified, too. This is because you want to put both boxes in a wrapper and specify the width of it, too:

HTML

<div id="wrapper">      
    <h1>Title</h1>
    <nav class="r-set">
        <p><a href="#">Two</a></p>
    </nav>
    <div id="a">
        <h3>One</h3>
    </div>
</div>

CSS

#wrapper{
    width: 445px;
}

Whenever you're floating elements it's a good idea to put them in a wrapper like this so you bring them back into the DOM, so to speak. This will avoid problems like you experienced with Box One rendering behind box 2.

Here's a jsFiddle bringing it all together. BTW, if you want Box Two to sit completely flush against Box One, take away its left margin.

EDIT:

To make Box Two static and Box One expandable you should use the same CSS and markup. Just take away Box One's float and width properties and give it a right-margin of 225px (the width of Box Two minus the right margin). Here's the updated jsFiddle.

That's good to know that they float out of DOM. But ideally, instead of exact values I'd like my gray box to always be 200px, and yellow box to fill the rest of the space - no matter how large the screen is. .. — tuco, Feb 06 '13 at 05:09
Qn: if floating an element takes it out of DOM, why do
s "see" the
as if nav is in the DOM? http://jsfiddle.net/9UJcZ/ — tuco, Feb 06 '13 at 15:04
Great question! The answer is best explained here [Why do
s clear floats?](http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats) — symlink, Feb 07 '13 at 02:05

Serj Sagan · Answer 3 · 2013-02-06T04:50:47.750

0

You need to set a width on your boxes, to be exact you will need to change padding to a %:

#a {
    background-color:#FFC;
    padding:1%;
    width:58%;
}

.r-set {
    padding-left:1%;
    float:right;
    width:39%;
}

JS fiddle shows it better: here

edited Feb 06 '13 at 04:50

answered Feb 06 '13 at 04:44

Serj Sagan

28,927
17
154
183

looks right! Why is your percentage not equal to 100? 36+58 = 94% ... ok with padding on each side: 94 + 4... still 98%? – tuco Feb 06 '13 at 04:54
This answered a tricky question for me (a CSS-newb).. trying to create an efficient vertical break line in a container box.. thank YOU.. – drew.. Dec 08 '16 at 05:45

score -1 · Answer 4 · edited Feb 06 '13 at 05:03

see this link jsfiddle.net/EwC2Z/1/

Html

<body>

<h1>Title</h1>

    <div>
        <div>
            <nav class="r-set">
                <p><a href="#">Two</a></p>
            </nav>
        </div>
        <div id="a">
             <h3>One</h3>

        </div>
    </div>
</body>

Css

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
/*resests end*/
 body {
    font-size:16px;
    margin:5px;
}
h1 {
    font-size:2em;
}
nav {
    background-color:#ccc;
    padding:5px;
    width:200px;
    height:200px;
    margin:10px;
}
#a {
    background-color:#FFC;
    padding:10px;
    float:left;
    width:310px;
}
.r-set {
    padding-left:10px;
    float:right;
    margin-top:-3px;
}

close, but not quite (see image dl.dropbox.com/u/16876271/2.png) — tuco, Feb 06 '13 at 04:51

KBN · Answer 5 · 2013-02-06T08:22:01.970

When using float, add this at the end of the floating element. (inside the floating element).

<div class="clear"> </div>

where clear has the CSS definition as follows.

.clear {
clear: both;
}

Or if you are not using clear, you have to specify the width x height, explicitly.

Use <div class="clear"> </div> after the floating element, to prevent the following HTML elements to be not affected by its float.

So, using clear, your code should like:

<nav class="r-set">
  <p><a href="#">Two</a></p>
  <div class="clear"> </div> <!-- added clear -->
</nav>

<div id="a">
  <h3>One</h3>
  <div class="clear"> </div> <!-- added clear -->
</div>

EDIT:

Just saw your required screen.

#a {
    background-color:#FFC;
    padding:10px;
    float: left; /* added this */
    width: 65%; /* added this too, either give width in % or in pixels */
}

CSS floats & Overlapping boxes

5 Answers5