CODEWITHSUNDEEP
htmlcsscss-float
Mario Werner
Mario Werner

Reputation: 1871

Dynamic float left UL inside a float left DIV

I'm trying to achieve to following behavior:

On a Search Results site, I have two containers.

Container 1 and Container 2 are DIV with float: left property.

Inside Container 2 is an UL with a variable amount of LI elements.

Container 1 is only visible if search returned matching entries. So it can happen that Container 1 is not present in the HTML at all.

In that case I want Container 2 to be full width and the LI elements to be float: left

Or if the width of the view port (responsive layout) can't fit in both containers, Container 2 collapses to a new row. In that case I also want Container 2 to be full width an the LI elements to be float: left

When I simply set the LI to float: left the whole Container 2 already collapses to a new row. Also when trying to alternatively set the LI to display: inline-block etc. Container 2 collapses.

Do you know of an elegant way to solve this with CSS? I tried several approaches, but it doesn't work.

JSFiddle: https://jsfiddle.net/y8vctgun/1/

Upvotes: 1

Views: 435

Answers (1)

nejc.m
nejc.m

Reputation: 300

So if the container1 is completely removed from the html when no results are present then you can do this in CSS like so...

.container1 + .container2 li {
    float: none!Important;
}

.container2 ul li {
    float: left;

    margin-right: 20px;
    padding: 4px;
    background-color: #0f0;
    color: #000;
 }

So to explain. I added float:left to the li item and then if container1 is present I override it with float:none. Adjust it to your needs.

Upvotes: 1

Related Questions