DIV instead of TABLE is still a bit new to me...

[Jaxel]

So I'm trying to figure out a few of the quirks in CSS code... Lets say I have the following code:

<div class="block" id="recentvideo">
  <h2 class="blockhead">Recently Uploaded Media</h2>
  <div class="blockbody floatcontainer" style="background: #F2F6F8 none;">
    <ul id="latestmediacontainer" style="padding: 20px 0px 0px 0px;">
      <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px;
        background: white none; border: 1px solid #E9E9E9;
        display: block; float: left; padding: 10px;
        text-align: center; margin: 0px 0px 20px 20px;
        height: 200px; width: 300px;">testing....</li>
      <li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px;
        background: white none; border: 1px solid #E9E9E9;
        display: block; float: left; padding: 10px;
        text-align: center; margin: 0px 0px 20px 20px;
        height: 200px; width: 300px;">testing....</li>
    </ul>
  </div>
</div>

Gives the following output:


However, I would like these two <LI> fields to stretch to 50% each, so it fills out the entire division. So I changed the width of the two <LI> fields to 50%, instead of 300px. Unfortunately this didn't work and instead gave me thus:


It looks like it is doing this because 50% isn't 50% of the remaining space, but 50% of the entire space of the division, BEFORE space is removed for padding, margins, dropshadows and borders. This is evident because if I change the width of the <LI> fields to 100%, I get the following:


So my question of course is... How do I put a percentage width in place that calculates based on the remaining space available?

[bananalive]

An easy way around it would be have the width of the one of the right as 50% and then have the one on the left not floating but aligned to left.

[Wayne Luke]

Set your width to 48% and center them within the DIV. Or remove the margins and box shadows.

http://www.w3schools.com/CSS/css_boxmodel.asp

[Jaxel]

Originally Posted by Wayne Luke

Set your width to 48% and center them within the DIV. Or remove the margins and box shadows.

http://www.w3schools.com/CSS/css_boxmodel.asp

Yeah, but I want the page to look like the rest of the VB Skin. I'm going for consistancy and uniformity here. So removing the margins and box shadows is not an option. Also, setting the width to 48% is also not an option, as its different between everyone's different resolutions. On some computers, 48% is not enough, while 45% would be too much on other computers.

As well, I want to program it into my mod so people can select between 100% (1 per row), 50% (2 per row), 33.3% (3 per row) and 25% (4 per row) width of each cell. While a solution like this would be simple with a table and the "cellspacing" parameter, it seems that CSS makes this a bit complicated.

[Jaxel]

Okay... I'm just going to accept that you can't do percentages properly with the box model... an inherint flaw of design... and move on from it... however, now I have a new issue...

Using the following code: (I added padding and borders so its easier to see...)

	<li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px; background: white none; border: 1px solid #E9E9E9; display: block; float: left; padding: 10px; margin: 20px 0px 0px 20px; width: 500px; text-align: center;">
		<div>
			<div style="padding: 10px; border: 1px solid #000000; float: left;">
				<a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}"><img src="{vb:raw thumbnail}" border="0" alt="{vb:raw title}" width="150" /></a>
			</div>
			<div style="padding: 10px; border: 1px solid #000000;">
				<a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}">{vb:raw title}</a><br />
				{vb:raw date} at <span class="time">{vb:raw time}</span> by {vb:raw username}<br /><br />
				<img src="{vb:stylevar imgdir_rating}/rating-trans-15_{vb:raw rating}.png" alt="Rating: {vb:raw rating}" />
			</div>
		</div>
		<div style="padding: 10px; border: 1px solid #000000;">
			{vb:var preview}
		</div>
		<div style="padding: 10px; border: 1px solid #000000;">
			Tags:
		</div>
	</li>

I get the following:


How would I change the code so I get the following instead?

[Jaxel]

Figured it out...

<li style="-webkit-box-shadow: #C8C8C8 -2px 2px 2px; background: white none; border: 1px solid #E9E9E9; display: block; float: left; padding: 10px; margin: 20px 0px 0px 20px; text-align: center; width: 500px;">
	<div style="display: table;">
		<div style="display: table-row;">
			<div style="display: table-cell; padding-right: 10px;">
				<a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}"><img src="{vb:raw thumbnail}" border="0" alt="{vb:raw title}" width="150" /></a>
			</div>
			<div style="display: table-cell; vertical-align: top; width: 340px;">
				<a href="media.php?{vb:raw session.sessionurl}mediaid={vb:raw mediaID}">{vb:raw title}</a><br />
				{vb:raw date} at <span class="time">{vb:raw time}</span> by {vb:raw username}<br /><br />
				<img src="{vb:stylevar imgdir_rating}/rating-trans-15_{vb:raw rating}.png" alt="Rating: {vb:raw rating}" />
			</div>
		</div>
	</div>
	<div style="padding-top: 10px;">{vb:var preview}</div>
	<div style="padding-top: 10px;">Tags:</div>
</li>

http://test.8wayrun.com/media.php