Home/ Questions/Q 9250867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T10:33:08+00:00

I’ve been messing with CSS, trying to understand floats, etc. Here is what the

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0