How to add boxes

  • Unknown's avatar
    rmarkjr · Member ·

    ok so I have a packages page setup. This is going to have several package lists. I do not want the names and the descriptions to be in a straight up and down list one after the other as it will be very long.

    I am trying to get them into boxes side by side as much as possible. I think I can get away with two side by side and then another two side by side below that .. etc

    However I am having some troubles doing this. When I enable the package 1 I do get a border around it and it does condense to down to about half the page. BUT when I enable package2 it does nothing to package2.

    But if I enable package2 first it will put a box around it and then when I try to enable package1 it doesnt work.

    pretty much I can only have one enabled at a time.

    also they are right next to eachother and wasnt sure what to do to get them a little spaced out so they arent touching. I would imagine a padding of some sort.

    Thanks for the help

    /* border around package*/

    .package1 {
    box-sizing: border-box;
    width: 40%;
    float: left;
    border: solid;

    {

    /*cant get both active at the same time*/

    .package2 {
    box-sizing: border-box;
    width: 40%;
    float: left;
    border: solid;
    {

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I see your two boxes side-by-side, but at around 1045px in width, the right one moves below the left. What I would suggest is to use a different CSS class for the right one and float it to the right and remove the 5px left and right margin.

    At some point, the two are going to become too narrow, and you can then use a Media Query and set each the left and right box to 100% width and float the right one to the left so they align vertically.

    Give this a try and let me know if you have any issues.

  • The topic ‘How to add boxes’ is closed to new replies.