CSS - Evenly Spacing Oddly-sized Divs?

Hi,
I have designed a webpage for a local organization, and am having some trouble with the navbar at the top of the page. This issue only happens in Firefox, as far as I can tell. The homepage (go to radnorhistory.org) is correct, and several other pages are messed up (click on 'membership,' for example); the first link, titled "collection" shows up as a text link above the navbar and not an image. Any ideas?
-Thanks!

This is best explained by example. Please see http://www.drudolph.org/new/test.php for a proof of concept.

Basically, there's an outside layer (red border) that contains several layers inside (blue borders), and is styled so that it has fixed dimensions and can scroll vertically if necessary.

Over the blue layers, I want to position another layer (green box). This layer should move with the blue boxes, so that if you scroll up and down, the green box stays with it. On top of that - and here's the kicker - the green box, which will be large enough that it sometimes will expand beyond the outside red layer, should be completely visible.

So, the green layer needs to 1.) move relative to the blue layer but 2.) be seen outside the parent red layer at all times.

You can see on the test two attempts. One puts the green layer in with the blue layers, so that it can be positioned relatively. Unfortunately, this puts it "inside" the red "stack," so I don't believe any z-indexing will allow it to show outside of the red layer.

The second attempt puts the green div along side the red div, or on the same "stacking level." This allows you to use a z-index to put it above the red layer, but then it can't scroll relative to the blue layers inside.

So, at this point, I believe it's impossible to do. Thoughts?

I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it.

BUT I want the rest of the containers to be the same size as the biggest.

I.e.


--------- --------- --------- ---------
| | | | | | | |
| | | | | | | |
| | --------- --------- ---------
---------




See the first one is bigger?
Well I want the rest to be of the same size, i.e.

--------- --------- --------- ---------
| | | | | | | |
| | | | | | | |
| | | | | | | |
--------- --------- --------- ---------

if you look under the top banner on my site, the navigation bar is too tall and wide, and all of the buttons don't even fit the full width of the page.

it is partially complicated because two of the ten buttons have drop-down menus created through javascript.

it is a horizontal ul with the buttons floated left. i'll give you the cut-down html code and then the css to go along with it so you get the general idea.

navigation menu html:

html Code:
Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1"); $unvalidated_games=get_games("active=No"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_category_link("name=all&page=1&cattype=videos")."'"; ?> onmouseover='mopen("m2")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a> <div id='m2' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1&cattype=videos"); $unvalidated_games=get_games("active=No&cattype=videos"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a> </li> <li> <a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a> </li> <li> <a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a> </li> <li> <a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a> </li> <li> <a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a> </li> <li> <a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a> </li> <li> <a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>

  
<div id='navbar'>
        <ul id="sddm">
        <?php
        echo "
            <li>
                <a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a>
            </li>
            <li>
                <a href='".get_category_link("name=all&page=1")."'"; 
                ?>
                    onmouseover='mopen("m1")' <?php echo "
                    onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a>
                <div id='m1' 
                    onmouseover='mcancelclosetime()'
                    onmouseout='mclosetime()'>
                    ";
                    $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games");
                    foreach ($categories as $category) {
                        $link=get_category_link("name="._sp($category['name'])."&page=1");
                    
                        echo "<a href='".$link."'>".$category['name'];
                    
                        $category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
                        echo " (".$category['gamenum'].")";
                    
                    
                        echo "</a>";
                    }
                    $link=get_category_link("name=Unvalidated&page=1");
                    $unvalidated_games=get_games("active=No");
                    $num_unvalidated=count($unvalidated_games);
                    echo "
                    <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
                </div>
            </li>
            <li>
                <a href='".get_category_link("name=all&page=1&cattype=videos")."'"; 
                ?>
                    onmouseover='mopen("m2")' <?php echo "
                    onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a>
                <div id='m2' 
                    onmouseover='mcancelclosetime()'
                    onmouseout='mclosetime()'>
                    ";
                    $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos");
                    foreach ($categories as $category) {
                        $link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos");
                    
                        echo "<a href='".$link."'>".$category['name'];
                    
                        $category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name'])));
                        echo " (".$category['gamenum'].")";
                    
                    
                        echo "</a>";
                    }
                    $link=get_category_link("name=Unvalidated&page=1&cattype=videos");
                    $unvalidated_games=get_games("active=No&cattype=videos");
                    $num_unvalidated=count($unvalidated_games);
                    echo "
                    <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
                </div>
            </li>
            <li>
                <a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a>
            </li>
            <li>
                <a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a>
            </li>
            <li>
                <a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a>
            </li>
            <li>
                <a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a>
            </li>
            <li>
                <a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a>
            </li>
            <li>
                <a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a>
            </li>
            <li>
                <a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a>
            </li>";
        ?>
        </ul>
        <div style="clear:both"></div>
    </div>

navigation menu general css:

css Code:
Original - css Code #sddm { display:block; margin: 0; padding: 0; z-index: 30; position:absolute; } #sddm li { display:block; margin: 0; padding: 0; list-style: none; float: left; max-height:31px; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 4px 0.3em; margin:0; }

  

 #sddm {


     display:block;


     margin: 0;


     padding: 0;


     z-index: 30;


     position:absolute;


 }


  


     #sddm li {


         display:block;


         margin: 0;


         padding: 0;


         list-style: none;


         float: left;


         max-height:31px;


     }


     


         #sddm li a {


             display: inline-block;      


             text-decoration: none;


             color:#495B20;


             background-color:#BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


             padding: 4px 0.3em;


             margin:0;


         } 

so what i want is for the buttons (<li>s) to have the exact height of their background div, which is 31px, and i also want them to fill 100% of their background div's width. how can i make this possible?

Hello! Is it possible to get iframe fully fill the div when div is in the middle of the screen and it is absolutely positioned and left,right,top,bottom: 100px;

I can't see it working (and in practice it hasn't).

Surely the background position needs to be fixed as the image is not scalable.

I hope I am right on this or it's back to the drawing board.

What is the best way to evenly space these links inside the div?

PHP Code:
<div id="contain_header">
        <div id="header">
        <a href="index.php" class="nav">Homepage</a>
        <a href="manufacturers.php" class="nav">Manufacturers</a>
        <a href="contact.php" class="nav">Contact Us</a>
        <a href="carfinder.php" class="nav">Advanced Car Search</a>
        <a href="specialoffers.php" class="nav">Special Offers</a>
        <a href="faq.php" class="nav">FAQ's</a></div>
    </div> 

I have a full page menu which resizes.

eg

item1 | item2 | item3 | item4 | item5 | item6

Which resizes depening on the window size. However if you shrink the window X ways, it does the following

item1
| item2
| item3
| item4
| item5
| item6

how can I stop it wrapping the items to new lines

heres my code.

Code:

 #menu2 {
   display : inline;	  
      white-space : nowrap;  
      width: 100%;
      margin: 1em 0;
      padding: 0px 0.5em;
      background: #eee none;
    }
    #menu2 ul {
   display : inline;		
      white-space : nowrap;	
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    #menu2 li {
   display : inline;	
      white-space : nowrap;	
      margin: 0;
      padding: 0;
      float: left;
    }
    #menu2 li {
      white-space : nowrap;
     display : inline;	
      width: 24%;
      text-align: center;
    }
    #menu2 a {
             float:left;
	display:block;
	margin: 2px 0 0;
	text-decoration: none;
	padding-right: 0.4em;
	padding-left: 0.65em;
}

and
Code:

<div id="menu2">
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
      </ul>
    </div>

Hi,

I am using nested tables in order to create a recursive tree-like effect. I got it to look how I want on IE 8, and it looks almost identical in Firefox. However, Chrome is not distributing table rows evenly. It seems to make the first row in a table a minimum size, and then the second row a maximum size.

I'm looking for some css property that will help this to work across all three browsers, and I'm also open to another way of doing this - (instead of nested tables) - but I did spend weeks getting it to look this way before I decided I wanted to try tackling Chrome, and have been unable to figure it out.

Here is a simple example that clearly demonstrates what I'm trying to get working on Chrome. (as a new user I can't post a url to the working page I have up on the internet)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Firefox Vs Chrome - table rows - found @ http://jacob.jrobertsons.com/FirefoxVsChromeRows.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
table {
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
	border: solid 0px blue;
}
td {
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
	border: solid 0px black;
}
.l {
	border-left: 1px solid #c82;
}
.b {
	border-bottom: 1px solid #c82;
	width: 15px;
}
.t {
	border-top: 1px solid #c82;
}
.n {
	padding-bottom: 4px;
	border: 1px solid #c82;
}
</style>
</head>
<body>



<table>
	<tr>
		<td rowspan="4">

		<table>
			<tr>
				<td class="n" rowspan="2">AAA<br />
				AAA<br />
				AAA<br />
				AAA<br />
				AAA<br />

				</td>
				<td class="b">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
		<td class="b">&nbsp;</td>

		<td rowspan="2">
		<table>
			<tr>
				<td rowspan="4">
				<table>
					<tr>
						<td class="n" rowspan="2">BBB<br />
						BBB<br />

						BBB<br />
						BBB<br />
						BBB<br />
						BBB<br />
						BBB<br />
						BBB<br />

						BBB<br />
						</td>
						<td class="b">&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
					</tr>
				</table>

				</td>
				<td class="b">&nbsp;</td>
				<td rowspan="2">
				<table>
					<tr>
						<td rowspan="0">
						<table>
							<tr>
								<td class="n" rowspan="2">CCC</td>

								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>

				</td>
			</tr>
			<tr>
				<td class="l">&nbsp;</td>
			</tr>
			<tr>
				<td class="b l">&nbsp;</td>
				<td rowspan="2">
				<table>

					<tr>
						<td rowspan="0">
						<table>
							<tr>
								<td class="n" rowspan="2">DDD<br />
								DDD<br />
								DDD<br />

								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
							</tr>
						</table>
						</td>
					</tr>

				</table>
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>

	<tr>
		<td class="l">&nbsp;</td>
	</tr>
	<tr>
		<td class="b l">&nbsp;</td>
		<td rowspan="2">
		<table>
			<tr>
				<td rowspan="2">

				<table>
					<tr>
						<td class="n" rowspan="2">EEE</td>
						<td class="b">&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
					</tr>

				</table>
				</td>
				<td class="b">&nbsp;</td>
				<td rowspan="2">
				<table>
					<tr>
						<td rowspan="0">
						<table>
							<tr>

								<td class="n" rowspan="2">FFF<br />
								FFF<br />
								FFF<br />
								FFF<br />
								FFF<br />
								FFF<br />

								FFF<br />
								FFF<br />
								FFF<br />
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>

								<td>&nbsp;</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>

				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>


</body>
</html>

Thanks for any help you can provide!

I have a menu within my content thus:

Code:

div class="contentMenu">
<ul>
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" />
<span>Family life</span></a>
</li>
.
.
.
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" />
<span>Sights/Sounds</span></a>
</li>
</ul>
</div>

I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is:

Code:

.contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}

Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction.

Hi guys!

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!

Here is what I'm trying to do, complete with pictures to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.

Code:

http://img708.imageshack.us/img708/2458/layoutstyle.jpg

The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Code:

http://us.blizzard.com/diablo3/?rhtml=y

unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language).

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.


P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*.

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.