CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fred Johnson
Fred Johnson

Reputation: 2695

How do I get these boxes to align in either jquery or css

I have boxes in a line, and I want it so when a new one is appended, it moves the others to the right and fits in on the left, and if the boxes overflow your screen they are simply hidden. I want to be able to keep appending so it needs to be I know I could fiddle with absolute position and jquery - use hidden input with box count, calculate the screen width and define left or right positions, but to be honest I'd rather not: I'm sure there's a way of doing it with overflows but I cant get anything to work. I am open to adding divs / css etc. Many thanks,

HTML: 

<div id="boxWrap">
    <div id="innerWrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div>
</div>

jquery:

$(function()  {

  var html = '<div class="box"></div>';
  $('#boxWrap').append(html);

});

CSS:

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
}
#boxWrap {
    width: 100%;
     overflow-y: visible;
    height: 20px;

}
#innerWrap {
    overflow-x: hidden;
    max-width: 100%;
}

Edit:

<button>Append</button>
<div id="boxWrap">
    <div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>
</div>
<input id="count" value=0></input>




$('button').click(function(){

    var html = '<div class="box"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');

    var count = parseInt( $('#count').val(), 10 );
    count = count+1;

    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
        $lastBox.index(count-1).css( {"display": "none" }  );
    }

});

Upvotes: 0

Views: 104

Answers (3)

Aesdotjs
Aesdotjs

Reputation: 192

You can achieve this by using display table/table-cell which are perfect for filling a container with a random number of child without overflowing.

.box {
    background-color: #333333;
    display: table-cell;
    color:white;
    text-align:center;
}
#boxWrap {
    width: 100%;

}
#innerWrap {
     width:100%;
    display:table;
}

Here is a fiddle to explain

You can click on "Click me" to add any number of box.

Another fiddle with margin and min-width

Upvotes: 0

George
George

Reputation: 36794

If you want the boxes to be added to the left of (before) the others, you'll want to use prepend(), you'll also want to call it on the parent of the boxes. You can keep your boxes on the same line by changing the white-space CSS property:

jQuery

var html = '<div class="box"></div>';
$('#innerWrap').prepend(html);

CSS

#innerWrap {
    white-space:nowrap;
    overflow-x: hidden;
    max-width: 100%;
}

JSFiddle

I'm not sure I've fully understood the question, but this is what I think you are looking for.

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15807

use float:right

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
     float:right;
}

DEMO

Upvotes: 0

Related Questions