CSS on Dynamic Elements breaks Layout

Question

Currently I have 2 sub-container elements which sit side by side. One is the left navigation menu and the second is the content display area on the right. These are populated in the Document.Ready() function, however doing so results in the page layout breaking as the container behind these does not expand.

I have tried setting various display elements such as "block", "inline", etc. just to see if it would correct the problem, but thus far I am not having any luck. Can anyone perhaps provide insight on what the problem may be in this case?

I found I can fix it by removing the "float:left" from the pluginBox but I am no longer able to put space between these elements.

CSS:

.containerBox {
    margin: auto;
}
.catBox {
    float: left;
    height: 750px;
    width: 20%;
    overflow: auto;
    margin: 0;
    border: solid black 1px;
}
.pluginBox {
    float: left;
    margin-left: 25px;
    height: 750px;
    width: 75%;
    overflow: auto;
    border: solid black 1px;
}

HTML:

<div id="containerBox" class="containerBox">
    <div id="catBox" class="catBox">
        <ul id="categories" class="cat_menu"></ul>
    </div>
    <div id="pluginBox" class="pluginBox">
        <table id="pluginTable" class="plugin_table">
        </table>
    </div>
</div>

Try giving `height:auto` to your `containerBox` – Guruprasad J Rao Sep 08 '15 at 07:30 — Guruprasad J Rao, Sep 08 '15 at 07:30

score 2 · Accepted Answer · answered Sep 08 '15 at 07:32

2

Add overflow hidden to your contanerBox

.containerBox { margin: auto; overflow: hidden; }

answered Sep 08 '15 at 07:32

Sa Si Kumar

652
1
5
12

That fixed it perfectly, thank you so much! Can't believe it was that easy. – Sep 08 '15 at 07:36

score 1 · Answer 2 · answered Sep 08 '15 at 07:30

Its because you're floating both inner containers.

you'll need to do something like the following https://jsfiddle.net/564sde36/:

.containerBox:after,
.containerBox::after {
  clear: both;
  content: "";
  display: table;
}

This is effectively the styling after the container has been generated and doesn't mean you need any additional html markup.

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Here is also a post about "clearfix" class, usually used when you have floating elements inside a container: What is a clearfix?

edited May 23 '17 at 12:06

Community

1
1

answered Sep 08 '15 at 07:52

Hideo

35
5

CSS on Dynamic Elements breaks Layout

3 Answers3