PDA

View Full Version : Resolved CSS Block-Building Issue



Shane.Jeffery
Aug 16th, 2009, 08:18 PM
Hey all.

Alright, let me see if I can lay this out here.

I have two different columns within a container. The right column itself is a container and has a table in it and another div container. I am running into a spacing issue between the table and the div container.

What is happening is that the height of the table is 300px. When I put the div container below the table, the container starts right after the bottom margin. The problem with that is that the table can sometimes not have the contents that span the entire 300px. So, what happens is that the table gets shortened and then the div container moves up out of the place that it originally was.

In essence, what is happening is that the div container is relying on the table for positioning when I want to the div container to be independent and just work off of the already preset height in the table.

Here is the HTML/CSS setup that I currently have:


div#armory {
float: left;
font-family: Tahoma,Geneva,sans-serif;
width: 1000px;
}

div#armorycontainer {
margin: 12px 33px 5px;
width: 950px;
}

div#armory_right {
background: url("../images/full_armory_bg.png") no-repeat top left;
width: 603px;
float: left;
margin: 10px 0px 5px 0px;
}

span#item a img {
width: 39px; height: 39px;
border: 1px solid #666666;
padding: 1px 0px 0px 0px;
}

span#item_bg {
background: url("../images/item_bg.png") no-repeat top left;
width: 265px; height: 57px;
}

table#armory_box {
margin: 65px 25px 25px 25px;
width: 550px; height: 350px;
overflow: hidden;
float: left;
padding: 0;
}

table#armory_box td.imagebox {
width: 47px;
align: left;
padding: 5px 0px 0px 5px;
margin: 0;
}

table#armory_box td.imagedesc {
color:#A1A1A1;
vertical-align: middle;
font-size:12px;
width: 200px;
padding: 10px 0px 0px 5px;
margin: 0;
}

col#col_image {
width: 47px;
}

col#col_desc {
width: 200px;
}

/* Screenshot Gallery */

div#screens_box {
margin: 100px 30px 0px 30px;
width: 550px; height: 150px;
overflow: hidden;
float: left;
padding: 0;
}

div#screens_box .thumbnail {
background-color:#222222;
border:1px solid #2A2A2A;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:3px 3px 8px;
}


<div id="armory_right">
<table id="armory_box">
<colgroup>
<col id="col_image" />
<col id="col_desc"/>
<col id="col_image" />
<col id="col_desc"/>
</colgroup>


{section name=item loop=$charItems}
{if $smarty.section.item.index == 0 || $smarty.section.item.index == 2 || $smarty.section.item.index == 4 ||
$smarty.section.item.index == 6 || $smarty.section.item.index == 8 || $smarty.section.item.index == 10 ||
$smarty.section.item.index == 12 || $smarty.section.item.index == 14 || $smarty.section.item.index == 16}
<tr>
{/if}
<span id="item_bg">
{if $smarty.section.item.index == 0 || $smarty.section.item.index == 2 || $smarty.section.item.index == 4 ||
$smarty.section.item.index == 6 || $smarty.section.item.index == 8 || $smarty.section.item.index == 10 ||
$smarty.section.item.index == 12 || $smarty.section.item.index == 14 || $smarty.section.item.index == 16}
<td class="imagebox">
{else}
<td class="imagebox">
{/if}
<span id="item">{$charItems[item].hover_url}</span>
</td>
<td class="imagedesc">
{$charItems[item].item_name}
</td>
</span>

{if $smarty.section.item.index == 1 || $smarty.section.item.index == 3 || $smarty.section.item.index == 5 ||
$smarty.section.item.index == 7 || $smarty.section.item.index == 9 || $smarty.section.item.index == 11 ||
$smarty.section.item.index == 13 || $smarty.section.item.index == 15 || $smarty.section.item.index == 17}
</tr>
{/if}
{/section}
</table>

<div id="screens_box">

{if $character.screenshot_1}

<div class="thumbnail"><a rel="lightbox[characters]" href="{$character.screenshot_1}"> <img width="100" height="40" src="{$character.screenshot_1}"/></a></div>

{/if}

{if $character.screenshot_2}

<div class="thumbnail"><a rel="lightbox[characters]" href="{$character.screenshot_2}"> <img width="100" height="40" src="{$character.screenshot_2}"/></a></div>

{/if}

{if $character.screenshot_3}

<div class="thumbnail"><a rel="lightbox[characters]" href="{$character.screenshot_3}"> <img width="100" height="40" src="{$character.screenshot_3}"/></a></div>

{/if}

{if $character.screenshot_4}

<div class="thumbnail"><a rel="lightbox[characters]" href="{$character.screenshot_4}"> <img width="100" height="40" src="{$character.screenshot_4}"/></a></div>

{/if}

</div>

</div>

Ignore the $character variables. Just Smarty template usage.

If you have any questions or need any further information, please let me know.

I would link my site but it is still htaccess protected until launch. If it would help you to see it, please let me know and I will PM you the login for the page.

Thanks!

Shane.Jeffery
Aug 16th, 2009, 08:51 PM
I deserve an idiot point for this one.

Simple solution. Take the CSS properties for the table and then put a div around the table with the same properties. Take out the table properties and give it 0 padding/margin.

There we go!

Scriptet
Aug 16th, 2009, 09:16 PM
Yep there's a number of ways to solve this.

Strange if you are giving your table a height of 350px as you have done, are you saying that sometimes the height was less than this even though you defined it as 350px?