Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div "Uniform" Sizes

Status
Not open for further replies.
booeyOH

booeyOH

Programmer
May 30, 2007
48
US
Hello,
I have a series of text strings, e.g.:

"Morning Meeting"
"Managers Quarterly Meeting"
"Lunch Meeting"
"Fun"
etc.

I would like to create a list of divs, with float:left, and a border around them, so they float nicely next to each other. The problem is that each div is a different width because of the length of the text.

Is there a way (without using a fixed width) to make them all the same width?

The reason I don't want to use fixed width is that then the heights get messed up, and they are uniform by width, but not by height.

Help :)

Bryan
 
Sort by date Sort by votes
Is there a way (without using a fixed width) to make them all the same width?
Click to expand...
I think you're going to have to set a width on them. You can set width as a percentage (of the parent node).
Code: 
<div style="width:28%">qwerty</div>
Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Ok, I don't have a problem doing that, but then there is the problem with the height. If, for example, one of the strings goes beyond what 25% of the parent node is, it will stretch the height. Which is not a problem if it can stretch the other divs to stay "uniform".

Ideas?

bryan
 
Upvote 0 Downvote
OK... it's not possible to do that using just HTML/CSS (unless you switch to using a table - which may end up being the solution you for - although not optimal by any means)... but how about you prevent them from wrapping in the first place? That would mean that the extra long sentences would have wider divs...
Code: 
<div style="[b]white-space:nowrap;[/b]width:25%;">Long string that just won't wrap</div>
...or you could trim the div contents so that the rest of the string is "hidden" (again, probably not optimal)...
Code: 
<div style="[b]overflow:hidden;[/b]width:25%;">Long string that just won't display all of it</div>
Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote

Javascript could do it :

1. loop through all the divs
2. grab all the height values of every div
3. choose the higher value
4. apply it to all the divs.

Same for the width.
 
Upvote 0 Downvote
I thought about the JS solution. There is only a slight problem with that, and that is that I am using xajax and there isn't a *great* way to run Javascript after the fact (since the original JS load already happened). But I could figure out a way.

Thanks for the ideas!

Bryan
 
Upvote 0 Downvote
Well, the JS idea doesn't seem to work :(

The width/height changes aren't computed :

Code: 
<html>
<head>

<title></title>

</head>

<style type="text/css">
<!--
            
#item {

border: 1px solid #000000;
margin: 5px;
padding: 5px;

}

-->
</style>

<body>

<div id="menu">            

    <span id="item"> 
    ed oehd oeh dohedowh do
    </span>
 
    <span id="item" style="width: 100px; height: 100px;"> 
    ed oehd oeh dohedowh do
    </span>
    
    <span id="item"> 
    ed oehd oeh dohedowh doed oehd oeh dohedowh do
    </span>

</div>

<br><br><br>

<div id="result">  

</div>

<script type="text/javascript">
<!--

var this_div = document.getElementById( 'menu' );
var elem_num = this_div.getElementsByTagName( 'span' );

var result = '';

    for ( i=0 ; i < elem_num.length ; i++ ) {
    
    result += elem_num[i].id + ' ' + (i+1) + ' : ' + ' width is ' + elem_num[i].style.width + ' height is ' + elem_num[i].style.height + '<br>';

    }

document.getElementById( 'result' ).innerHTML = result;

// -->
</script>

</body>
</html>
 
Upvote 0 Downvote
OK, here is a working solution for both the width and the height ! Tested on IE6 and FF2.

Code: 
<html>
<head>

<title></title>

</head>

<style type="text/css">
<!--
            
.item {

float: left;
border: 1px solid #000000;
margin: 5px;
padding: 5px;

}

#left {

width: 1px;
height: 1px;

}

#right {

width: 1px;
height: 1px;

}

#bottom {

clear: both;
display: block;
width: 100%;
height: 1px;

}

-->
</style>

<body>

<div id="menu">            

    <div class="item">
        <span id="left"></span>
    ed oehd oeh dohedowh do
        <span id="right"></span>
    </div>
 
    <div class="item">
        <span id="left"></span>
    ed oehd oeh dohedowh do
        <span id="right"></span>
    </div>
    
    <div class="item"> 
        <span id="left"></span>
    ed oehd oeh dohedowh doed oehd oeh dohedowh do
        <span id="right"></span>
    </div>

<span id="bottom"></span>

</div>

<br><br><br>

<div id="result">  

</div>

<script type="text/javascript">
<!--

var this_div = document.getElementById( 'menu' );
var elem_num = this_div.getElementsByTagName( 'span' );

var xleft;
var xright;

var ytop;
var ybot;

var width = new Array;
var height = new Array;

    for ( i=0 ; i < elem_num.length ; i++ ) {

        if (elem_num[i].id == 'left') {
        
        xleft = elem_num[i].offsetLeft;
        
        }
        
        if (elem_num[i].id == 'right') {
        
        xright = elem_num[i].offsetLeft;
        
        width.push(xright - xleft);

        }        
    
        if (i == 0) ytop = elem_num[i].offsetTop;
        
        if (elem_num[i].id == 'bottom') {
        
        ybot = elem_num[i].offsetTop;
        
        height.push(ybot - ytop);

        }          

    }

width.sort();
width.reverse(); 

height.sort();
height.reverse(); 

var elem_num = this_div.getElementsByTagName( 'div' );

    for ( i=0 ; i < elem_num.length ; i++ ) {
    
        if (elem_num[i].id != 'bottom') {
        
        elem_num[i].style.width = width[0] + 'px';
        elem_num[i].style.height = height[0] + 'px';
        
        }
    
    }

// -->
</script>

</body>
</html>
 
Upvote 0 Downvote
Ingenious as it is, I think I'd opt for a single row table rather than all those divs and spans and javascript calls. A normal reason to avoid tables-for-layout as that it needs less markup and is simpler to maintain. If the proposed code is neither leaner nor simpler, it's hard to justify using it on other than dogmatic grounds.

That said, I don't really understand the question:
Is there a way (without using a fixed width) to make them all the same width?
Click to expand...
How are you going to get everything the same width without fixing that width at some value?

Personally, I'd determine the width (in ems) of the widest option and fix all of them at that width. Using ems means that the boxes will resize if the font size does. You can see this approach in action at
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
614
tyutghf
tyutghf
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
lupidol
  • Locked
  • Question
input:hover[type=&quot;submit&quot;] 1
Replies
4
Views
323
lupidol
lupidol
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
121
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top