SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question difficult problem with floating blocks

    Hello,

    I try to do the following design:

    There are some quantity of blocks. The quantity is different each time I draw the page.
    They all included in one outer block with width in %.

    Each block includes:
    - one image (always the same, width="40px")
    - one string (there are <=15 characters, every character could be different); the length of the line could be more than the width of the image above it

    I need:
    1. All blocks should be the same width.
    and
    2. Blocks should occupy all empty place within outer block line by line, i.e. if, for example, 3 blocks are enough to full the first line, the 4d block should be right under 1st, 5th - under 2nd and so on.
    By eye blocks should become arranged like in a table.

    How can I do that?

    Thanks in advance.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello, and welcome to Sitepoint

    Is it something like this you are looking to achieve?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #blocks {
    	float: left;
    	width: 50&#37;;
    	background: #930;
    }
    #blocks div {
    	float: left;
    	width: 100px;
    	height: 100px;
    	line-height: 100px;
    	text-align: center;
    	background: #F93;
    	margin: 2px;
    }
    </style>
    </head>
    <body>
    <div id="blocks">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Is it something like this you are looking to achieve?
    Ups... No.
    My problem is I don't know the width of inner text string, and it can be defferent in each block. And - I need each block have the same width in the same time.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    That doesn't make sense
    The blocks have the same width all the time and the text within wont effect that size.

    Perhaps you provide code which the displays the problem you want to fix.

    You can add overflow: hidden to each block to chop off the text that hangs outside the given dimensions?

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    That doesn't make sense
    The blocks have the same width all the time and the text within wont effect that size.
    It is so in your example, but I can't use width in pixels, because I really don't know the length of each string. And the problem is I need all blocks have the same width, i.e., roughly speaking, set by the widest of them.

    Quote Originally Posted by markbrown4 View Post
    Perhaps you provide code which the displays the problem you want to fix.
    Now I only use css rule
    float: left; padding: 0 2em 2em 0;
    for inner blocks.

    Quote Originally Posted by markbrown4 View Post
    You can add overflow: hidden to each block to chop off the text that hangs outside the given dimensions?
    I can't. I need to show the whole text.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It can't be done in css I'm afraid if I understand correctly what you are asking for. You could do something silar with a table but you wuld need to set the number of cells beforehand which it seems you can't do. Therefore I don't think you can do exactly what you want in tables either.

    The only solution would be to script the answer which means finding out the width of the widest elements and then applying that to each floated block with the appropriate margins to fit.

    All in all it seems you are asking css to cover what is essentially a programming problem. CSS only defines the look of elements but doesn't adjust their sizes in respect to anything else.

    Table cells will automatically adjust in relayion to other cells but you would be limited to only so many cells per row which you would have to decide beforehand.

    I would suggest a simple design perhaps unless you are good at scripting

    (assuming I haven't misunderstood the problem of course )


Bookmarks

Posting Permissions

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