Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    A CSS Wrapping Problem

    I have a DIV which contains a long series of many in-line cells of same size (200px by 50px), each using a same background graphic. The DIV containing these cells is fluid and so the cells flow and wrap down when the window is resized.

    The problem I am having is that the wrapping does not always wrap exactly around the sides of the displayed cells when the window is resized. There's a wide blank space on the right side of the DIV. If there's enough space to fit another full cell width, the wrapping will be good . If the space is less than the width of a cell, the wrapping will not move to the side of the cells.

    What should I do to make the right side of the window always wrap nicely (ie. with no blank space)?

    Any help will be appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Without code it's hard to understand why you want this. Is it just for understanding?

    I think ... that your main DIV has no width and runs from one side to the other side of your browser page. Do you need the images to drop down or just fill the horizontal space? You could set the image as background-image and set background-repeat: to repeat-x.

    Its bad form to take control of the browser window and make it smaller at certain width settings. Then what we might want is to control the spacing between the images. OR shrink the DIV and center it.

    What do you think? Do you want you image display to jump at times?

  • Users who have thanked sunfighter for this post:

    NeedAMentor (06-20-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is a sample code:

    <div id="container">
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords1</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords2</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords3</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords4</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords5</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords6</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords7</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords3</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords4</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords5</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords6</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords7</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords3</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords4</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords5</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords6</div>
    <div style="width:200px; float:left; background-image:url('mygraphic');">MyLabelWords7</div>
    </div>

    There are about 100 cells. I need the container wrapper to wrap nicely around the cells (each width=200px) without any space whenever the window is resized and the cells overflow downward. Presently, there is a blank space of width vaying between 1px-199px on the right side of the group of cells.

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Below is a working example of my code.

    How can I get the wrapper to always wrap on the right side of the column regardless of the window width, ie. it should always cling to the right edge of the column of graphics when they flow down?

    <html>
    <head>
    <style type="text/css">

    .celldiv {
    display:table;
    width:201px;
    height:46px;
    float:left;
    font-size: small;
    background-image: url('/brown.jpg');}

    .cellspan {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height:11px;}

    </style>
    </head>

    <body>

    <div id="container">
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    <div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
    </div>

    </body>
    </html>
    Last edited by NeedAMentor; 06-21-2012 at 12:07 AM. Reason: Amendment


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •