CODEWITHSUNDEEP
cssoverflowcss-float
user1083320
user1083320

Reputation: 1946

Div floating side by side with overflow?

I have a div wrapper, and inside it, i want divs to be side by side. I want the wrapper side to be fixed, so that as more divs are added, they overflow horizontally!!

Also, I want the wrapper width to be fixed! So I do want the posts inside to overflow inside the wrapper!

I want to use a class, so that I have something like

 <div id="wrapper">
      <div class='post'>Post 1</div>
      <div class='post'>Post 2</div>
      <div class='post'>Post 3</div>
 </div>

How do I do that?! :p

Cheers!!

Upvotes: 4

Views: 6769

Answers (5)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

Are you after something like this? That makes use of a second div inside your wrapper: the wrapper itself has a fixed width, and overflow-x set to scroll:

#wrapper {
    margin: 20px;
    padding: 20px;
    width: 300px;
    overflow-x: auto;
    background: #eee;
    border: 1px solid #333;
}

#wrapper>div {
    width: 600px;
}

.post {
    background: #fff;
    border: 1px solid #e4e4e4;
    float:left;
    margin-left: 20px;
    padding: 40px;
}

.post:first-of-type {
    margin-left: 0;
}

Upvotes: 4

BeatLaG
BeatLaG

Reputation: 63

I´d like to add that you will not know the total width of your content container. The only solution for having the total width based in the sum of the total of your posts widths is using javascript.

Here is an example of a little script that will do this:

/* adjust the size (width) of the posts container
 * this depends on all its posts widths
 */

function setWrapper(){
    var finalW = 0;
    itemsWrapper = $(".posts-container");
    itemsWrapper.find('.post').each(function(i){
        var $post = $(this);
        finalW+=$post.width();
    });
    itemsWrapper.css('width',finalW+'px');
    console.log("Your total width is: "+finalW);
}
setWrapper();

With this, you will set your posts container to the correct size without passing it explicitly in the css.

Upvotes: 0

michaeltintiuc
michaeltintiuc

Reputation: 671

As far as I understand you want your posts to be scrolled horizontally and sitting side by side.

To achieve this you will need to add an additional wrapper like so:

<div id="wrapper">
 <div id="contentWrapper">
      <div class='post'>Post 1</div>
      <div class='post'>Post 2</div>
      <div class='post'>Post 3</div>
      <div class='post'>Post 4</div>
      <div class='post'>Post 5</div>
      <div class='post'>Post 6</div> 
      <div class='post'>Post 7</div>
      <div class='post'>Post 8</div>
 </div>

Here's the css to achieve the desired effect :

#wrapper {
    width:400px;
    height:200px;
    overflow: auto;
}
#contentWrapper {
    float: left;
    margin-right: -30000px;
}
.post {
     width:100px;
     height:100px;
     display:inline-block;
}

A working example can be found here : http://jsfiddle.net/QNXmk/1/

Upvotes: 1

Scott
Scott

Reputation: 21882

#wrapper {
display: block;
width: 600px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
background: #900;
white-space: nowrap;}

.post {
display: inline-block;
width: 250px;
height: 100px;
background: #c00;
margin: 0 5px; }

Jfiddle sample here

Upvotes: 3

Chris M
Chris M

Reputation: 242

Set the wrapper div to have overflow:auto for scrolling, auto width for resizing (although you'll need to position absolute for that to work correctly I believe- remember to set the parent to position relative for accurate top:x and left:x in sub div's) then float:left the .post class.

Upvotes: 1

Related Questions