CODEWITHSUNDEEP
htmlcsslayout
Mingle Li
Mingle Li

Reputation: 1350

float: left on element inside a horizontally scrolling container breaks layout

My container, with the horizontally scrolling elements, go like this:

<header id="id-grid-top-menu">

  <div class="cd-dropdown-wrapper">
    <a class="cd-dropdown-trigger">CPB1</a> 
    <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
    </nav>
  </div>

  <div class="cd-dropdown-wrapper">
    <a class="cd-dropdown-trigger">CPB1</a> 
    <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
    </nav>
  </div>

  <div class="cd-dropdown-wrapper">
    <a class="cd-dropdown-trigger">CPB1</a> 
    <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
    </nav>
  </div>
  .......more divs.....
</header>

CSS:

#id-grid-top-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 10% !important;
    background-color: white;
    display: block;
}

.cd-dropdown-wrapper {
    float: none;
    height: initial !important;
    position: static !important;
    margin: 15px 15px !important;
    display: inline-block;
}

Right now, this looks like this:

enter image description here

(sorry, ignore the CPB2)

This has the .cd-dropdown-wrappers line up horizontally and the container lets it overflow with overflow-x: scroll. However, I am forced to set float: none on the .cd-dropdown-wrapper element. If I have less divs, it looks like this:

enter image description here

The elements are all centered. This, obviously, doesn't look good and I want the elements to line up on the left. However, if I set float: left on the elements, they don't line up anymore and overflow; they just wrap around.

enter image description here

.cd-dropdown-wrapper {
    float: left;
}

How would I make it so it'll line up on the left but still it will overflow if it extends screen width?

EDIT:

I found something interesting. If, in #id-grid-top-menu, I set a fixed width--say, 100em. If I apply float: left to the .cd-dropdown-wrapper, it lines up on the left, and it overflows! However the horizontal scrollbar doesn't appear...

enter image description here

Upvotes: 0

Views: 705

Answers (2)

Mingle Li
Mingle Li

Reputation: 1350

Adding onto @Fabio 's code, I put float: left on #floatcontainer and float: none on the cd-dropdown-wrapper's. That made it work.

Upvotes: 0

Fab
Fab

Reputation: 4657

Just add another container with fixed width inside header tag.

<header id="id-grid-top-menu">
  <div id="floatcontainer">
    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger">CPB1</a>
      <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
      </nav>
    </div>

    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger">CPB1</a>
      <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
      </nav>
    </div>

    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger">CPB1</a>
      <nav class="cd-dropdown" style="top: 55px; left: 30px;">
        ...nav code here...
      </nav>
    </div>
  </div>
</header>

CSS:

#floatcontainer {
   width: 3000px;
}

Upvotes: 1

Related Questions