Grow your CSS skills. Land your dream job.

CSS to create something like a table (but not a table)

  • # March 27, 2014 at 3:39 pm

    Hello everyone! My first time here. I’ve always struggled with CSS and want to get better. Thanks in advance for your help.

    I hope what I am trying to explain looks good as I can’t find a preview button should it exist. Oh well, here goes….

    I want two rows on the page like the following:

    Address:   _________   Map
    City:      _________
    

    The “_____” is really an input element. I want the two rows to look like a table with three columns on the first row (“Address:”, input element, and map link) and two columns on the second row (“City:” and input element where there is a span between columns 2 and 3), however, for the mater principle, I don’t want to use a table. Currently, my HTML looks like the following, however, I can add a div wrapper if necessary.

    <div>
        <label for="address" class="input">Address:</label>
        <input type="text" id="address" >
        <a href="#">Map</a>
    </div>
    <div>
        <label for="city" class="input">City:</label>
        <input type="text" id="city" >
    </div>
    

    Now, the tricky part (at least for me). I am using jquery-validation, and if there is an error, it automatically inserts a label element below the applicable input (and also automatically adds class “error” to the applicable input element) as shown below. So, now, my HTML would look like:

    <div>
        <label for="address" class="input">Address:</label>
        <input type="text" id="address"  class="error">
        <label for="address" generated="true" class="error">This input is required</label>
        <a href="#">Map</a>
    </div>
    <div>
        <label for="city" class="input">City:</label>
        <input type="text" id="city"  class="error">
        <label for="address" generated="true" class="error">This input is required</label>
    </div>
    

    For this scenario, it would like the the following:

    Address:   _________   Map
               This input is required
    City:      _________
               This input is required
    

    Can anyone help me with the applicable CSS?

    Thank you!

    PS. Hope this post isn’t posted twice. First time I tried, it didn’t seem to take.

    # March 27, 2014 at 4:45 pm

    Here’s one way:

    http://codepen.io/wolfcry911/pen/hIagb/

    # March 27, 2014 at 8:13 pm

    Hi Wolfcry,

    How would you recommend removing the height if the validation label does not exist?

    Also, would it be simpler with more html markup or is it okay as is?

    Thanks

    # March 28, 2014 at 4:00 am

    I’ve updated the pen.

    I like to keep the html as simple as possible.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".