CODEWITHSUNDEEP
htmlcss
T.J.
T.J.

Reputation: 21

CSS Float is wrapping

This is probably and easy fix but I searched online without any luck.

I have a div that is snapped to the bottom of a page. That div contains button items that need to be stacked side by side ... I am doing that by using FLOAT but what happens is that the extra content is wrapped naturally and i am getting multiple rows of the buttons ...

What I need is a long row of buttons next to each other so that the long bar is fixed and scrollable left to right.

Please see visual problem here

enter image description here

enter image description here

The current code as is .... the entire containing div is called "footer" and here is the code 

#footer {
  position:fixed;
  width:100%;
  height: 100px;
  background-color:#b6b6b6;
  bottom: 0px;
  overflow-x:scroll;
  padding:10px;
}

The individual button divs are called "footerItems" and here is the code 

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

Upvotes: 2

Views: 96

Answers (3)

Luca
Luca

Reputation: 66

simply set .footerItems display to inline-block and add whitespace:nowrap to the footer #footer

Upvotes: 1

Fabic
Fabic

Reputation: 508

I don't know how to do it with floating elements. What you can do is using inline-block instead of float.

.footerItems {
   display: inline-block;
   padding-right:10px;
}

For that you need to add white-space: nowrap so the elements wont break.

#footer {
  position:fixed;
  width:100%;
  height: 100px;
  background-color:#b6b6b6;
  bottom: 0px;
  overflow-x:scroll;
  padding:10px;
  white-space: nowrap;
}

I guess you don't want to "see" the overflowing elements, so you have to add overflow: hidden to #footer too. Otherwise the parent-div would grow. Optional you can change hidden to scroll or whatever you prefer.

Upvotes: 2

Nate
Nate

Reputation: 4958

In this situation, I always prefer to set the width of the container to the total width of its children using javascript.

Live Demo

var $container = $('div');
var $children = $container.children();
var totalWidth = 0;

$children.each(function (i, child) {
    totalWidth += $(child).outerWidth(true);
});

$container.width(totalWidth);

Upvotes: 0

Related Questions