PDA

View Full Version : DIV instead of TABLE is still a bit new to me...


Jaxel
28 Mar 2010, 10:54
So I'm trying to figure out a few of the quirks in CSS code... Lets say I have the following code:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



Gives the following output:
http://www.vbulletin.org/forum/attachment.php?attachmentid=114828&stc=1&d=1269773342

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:
http://www.vbulletin.org/forum/attachment.php?attachmentid=114829&stc=1&d=1269773342

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:
http://www.vbulletin.org/forum/attachment.php?attachmentid=114830&stc=1&d=1269773342

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

bananalive
28 Mar 2010, 15:21
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
28 Mar 2010, 16:00
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
28 Mar 2010, 18:13
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
28 Mar 2010, 20:20
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...)


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


I get the following:
http://www.vbulletin.org/forum/attachment.php?attachmentid=114913&stc=1&d=1269807440

How would I change the code so I get the following instead?
http://www.vbulletin.org/forum/attachment.php?attachmentid=114915&stc=1&d=1269807440

Jaxel
28 Mar 2010, 21:46
Figured it out...



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


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