1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

DIV alignment expanding as it goes

Discussion in 'CSS' started by calidude50, Sep 28, 2017.

0
  1. #1
    This is an odd one but why are my boxes not staying uniform.

    I have attached an image of what it is doing.

    Here is the code

    <div class="row">
    <div class="medium-3 columns">
    <label class="right inline required">Your&nbsp;Name</label>
    </div>
    <div class="medium-9 columns">
    <input type="text" name="emailer_name" size="40" />
    </div>
    </div>
    <div class="row">
    <div class="medium-3 columns">
    <label class="right inline">Title</label>
    </div>
    <div class="medium-9 columns">
    <input type="text" name="emailer_title" size="40" />
    </div>
    </div>
    <div class="row">
    <div class="medium-3 columns">
    <label class="right inline">Company</label>
    </div>
    <div class="medium-9 columns">
    <input type="text" name="emailer_company" size="40" />
    </div>
    </div>
    <div class="row">
    <div class="medium-3 columns">
    <label class="right inline">Phone</label>
    </div>
    <div class="medium-9 columns">
    <input type="text" name="emailer_phone" size="40" />
    </div>
    </div>

    <div class="row">
    <div class="medium-3 columns">
    <label class="right inline required">Email</label>
    </div>
    <div class="medium-9 columns">
    <input type="text" name="emailer_email" size="40" />
    </div>

    </div>
    <!--- quote row1 --->
    <div>
    <div class="row">
    <div class="large-2 columns">
    <label class="right inline required">Part No. 1</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart1" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty1" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart1" size="40" />
    </div>
    </div>
    <!--- quote row 2 --->
    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Part No. 2</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart2" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty2" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart2" size="40" />
    </div>
    </div>
    <!--- quote row 3 --->
    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Part No. 3</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart3" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty3" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart3" size="40" />
    </div>
    </div>
    <!--- quote row 4 --->
    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Part No. 4</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart4" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty4" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart4" size="40" />
    </div>
    </div>
    <!--- quote row 5 --->
    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Part No. 5</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart5" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty5" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart5" size="40" />
    </div>
    </div>
    <!--- quote row 6 --->
    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Part No. 6</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart1" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty6" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart6" size="40" />
    </div>
    </div>
    <!--- quote row 7 --->
    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Part No. 7</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart7" size="80" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Quantity</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_partqty7" size="40" />
    </div>

    <div class="row">
    <div class="medium-2 columns">
    <label class="right inline required">Description</label>
    </div>
    <div class="medium-2 columns">
    <input type="text" name="emailer_descriptionpart7" size="40" />
    </div>
    </div>
     

    Attached Files:

    calidude50, Sep 28, 2017 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Impossible to say without seeing your CSS, but the use of classes like "row" or "columns" indicates a presentational markup mode of thought, which is a flawed concept at best, a disaster waiting to happen at worst.

    I do suspect that probably at least half your DIV belong in the trash though. You've got perfectly good label and input tags to style, why in blazes are you wasting DIV around them individually?!?
     
    deathshadow, Oct 9, 2017 IP