Layout issue CSS

Question

I'm new to webdevelopment and want to abide to the 'standards' in the field. I've understood that the table tag is for tabular data and the div tag is used for layout (followed some heated debates on i-net here and there).

I'm trying to construct a layout of a view and I'm doing my best to use div. But how do you space the elements exactly right with divs? I used to do this with the table tag in a few seconds.

This is my layout now:

searchView layout

As you can see, it's not lined out nicely.

This is my Razor code:

@model WebHIS___ArtsPortaalWeb.Models.SearchPatientModel
@using (Html.BeginForm()) {
    <div>
        <div class="editor-label">
            Voornaam:</div>
       <div class="editor-field">@Html.TextBoxFor(model => model.FirstName)</div>
        <div class="editor-label">
            Achternaam:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.LastName)</div>
        <div class="editor-label">
            GeboorteDatum:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.DateOfBirth, new {@class = "datafield", type = "date" })</div>
        <div class="editor-label">
            BSN:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.BSN)</div>
        <div class="editor-label">
        Straat:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.Street)</div>
        <div class="editor-label">
            Huisnummer:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.HouseNumber)</div>
        <div class="editor-label">
            Postcode:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.Zipcode)</div>
        <div class="editor-label">
            Plaats:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.City)</div>
        <input type="submit" value="Sumbit" />
    </div>
}

My CSS:

.display-label, 
.editor-label {
    margin: 1em 0 0 0;
    float: left; 
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
    float: left;
}

Thank you in advance for helping.

UPDATE: Apparently my question was not clear. I want my layout to look like the image, but then with the textboxes neatly lined out. So the textbox of "voornaam" exactly lines out with the textbox of "straat". The labels can be aligned right, against the textboxes they correspond with. I hope I made my wish more clear.

it would be nice if you place them in a table in different cells , or just try increasing the value of 0 in your margin attribute and also use padding attribute — Deepanshu Goyal, Apr 08 '13 at 12:05
If you want it laid out like a table, the best thing to do is to use a table. You could also give your labels a fixed width, and drop the `float: left` for both `-field` classes. — Twon-ha, Apr 08 '13 at 12:08
How about an un-ordered list `
` and list item `
` elements? Seems the most logical choice semantically to me. — Joshua, Apr 08 '13 at 12:17
What is your expected result? I don't really grasp what you are looking for. Is it something like this: http://jsfiddle.net/F6Enb/ ? — Alex, Apr 08 '13 at 12:24
At 1st 2 posters: I thought tables for layout is not done? @Alex: Cool site! Thnx. Almost... See updated question please. — Danny van der Kraan, Apr 09 '13 at 07:37
@DannyvanderKraan Okey, I just added text-align: right; to the labels now. Does this look like you want it to: http://jsfiddle.net/F6Enb/1/ ? — Alex, Apr 09 '13 at 08:48

score 1 · Accepted Answer · edited Apr 08 '13 at 12:20

1

For the best Layout put your in a <table>

<table>
    <tr>
        <td>Voornaam:
        </td>
        <td>Your text box.....
        </td>
        <td>Achternaam:
        </td>
        <td>Your text box.....
        </td>
        <td>thirdname:
        </td>
        <td>Your text box.....
        </td>
    </tr>
    <tr>
        <td>fourthname:
        </td>
        <td>Your text box.....
        </td>
        <td>fifthname:
        </td>
        <td>Your text box.....
        </td>
        <td>sixthname:
        </td>
        <td>Your text box.....
        </td>
    </tr>
</table>

or you may use display property of your labels and textbox to "Block" as per mentioned by Blowsie.

display:block

Hope it works for you...

edited Apr 08 '13 at 12:20

Blowsie

40,239
15
88
108

answered Apr 08 '13 at 12:09

Rahul

5,603
6
34
57

I'm confused. I thought using tables for layout is not done in webdevelopment? But you all recommend me using a table. I know how to use a table since HTML4, that's not the problem. So... Can I use a table or not? 'Cause then I'm done in 5 secs, no problem. – Danny van der Kraan Apr 09 '13 at 07:40
@Danny Who said this thing to you that using tables for layout is not done in webdevelopment.In my cases i am always using for my layout problem in web development and every time i correct it.My suggestion is just try using a
.
– Rahul Apr 09 '13 at 07:52
Well for instance this thread right here, on Stackoverflow: [link](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1) – Danny van der Kraan Apr 09 '13 at 08:08
@Danny that's ok but many users give there comment on that post as well that goes in favor of using , but you just ask me a solution and i m giving you my answer that works for me many time. Hope you will get rid off from your problem very soon by using any method suggested by many users.thanks.
– Rahul Apr 09 '13 at 08:18
I choose this as the accepted answer because I went with the table. It suits my needs the best and trying to get it to work in CSS felt really forced to me. – Danny van der Kraan Apr 10 '13 at 07:16

Anette · Answer 2 · 2013-04-08T12:27:19.887

1

You can add a width parameter in you css class

.editor-label { margin: 1em 0 0 0; float: left; width: 150px; }

Do the same with your input class and you get the "table"-look.
It can look nice if you align the text to the right.

edited Apr 08 '13 at 12:27

answered Apr 08 '13 at 12:10

Anette

11
2

This is not valid CSS and hard coding a width is a bad idea for labels – Blowsie Apr 08 '13 at 12:11
1

This is a quick-fix.. I would recommend using a responsive design by introdusing something like Twitter Bootstrap. – Anette Apr 08 '13 at 12:22
So whats the `
` doing in your css? – Blowsie Apr 08 '13 at 12:24
It snuck in... Removed it. – Anette Apr 08 '13 at 12:27
@Anette: Thnx for answering. What the heck is Twitter Bootstrap? Sounds complicated for something so simple... Maybe I shouldn't've mentioned a table in my question. I just want to layout my searchcriteria nicely... – Danny van der Kraan Apr 09 '13 at 07:42
@DannyvanderKraan yes, bootstrap is a bit offtopic for this answer but the reality is, its a nice semantic framework with alot of the CSS leg work cut out for you. A framework like this may save you some serious amounts of time if your not experienced with CSS... http://twitter.github.io/bootstrap/index.html – Blowsie Apr 09 '13 at 09:25

Blowsie · Answer 3 · 2013-04-08T12:09:27.973

0

You need to either...

Set your labels and inputs to display:block This approach is most semantic

or

Start a new line after each input by using <br/>

or

Wrap your labels and fields with a div with display:block. Doing this enables you to set a min-width on your label and give an effect of a table layout

edited Apr 08 '13 at 12:09

answered Apr 08 '13 at 12:03

Blowsie

40,239
15
88
108

Thanks for answering. Do you set the min-width in CSS or in the View? – Danny van der Kraan Apr 09 '13 at 07:44
CSS, inline styles add bytes and dom nodes, and yes attributes are dom nodes and have a performance impact on the dom. – Blowsie Apr 09 '13 at 09:02
I see. So, because you set `display:block` for a certain class in your CSS. You also get the ability to set the `min-width` in CSS for a certain class which you put on a `label`? Without display:block you can't set the min-width? – Danny van der Kraan Apr 09 '13 at 09:07
you can use `display:inline-block` for this. This will let you set the width without taking up 100% width by default – Blowsie Apr 09 '13 at 09:22
I choose table as the accepted answer because it suits my needs the best and trying to get it to work in CSS felt really forced to me. – Danny van der Kraan Apr 10 '13 at 07:17

Terry · Answer 4 · 2013-04-09T13:40:20.660

0

To start things off, try using the <label> elements for the labels, e.g.:

<label for="[input_ID]">Voornaam></label><input ... />

And what is the look are you trying to achieve? You did not state clearly what kind of layout do you want to achieve. Do you want all the labels to be the same size? If you want the label + input combo to have the same size, you should write your Razor code like this:

<div class="editor-field">
    <label>Voornaam:</label>
    @Html.TextBoxFor(model => model.FirstName)
</div>

... use the following CSS:

.editor-field {
    box-sizing: border-box;
    float: left;
    overflow: hidden;
    width: 25%;
}
.editor-field label, .editor-field input {
    float: left;
    display: block;
}
.editor-field label {
    width: (set fixed width here);
}

[Edit]: After some clarifications from the OP, I have revised the code. The OP wanted the label to be inline with the input element.

edited Apr 09 '13 at 13:40

answered Apr 08 '13 at 12:30

Terry

63,248
15
96
118

First off, thank you for answering. I've used the label tag now, but do you mind explaining in short why that is important? Your solution comes close, but the labels are above the textboxes now and I want them on the left. But the textboxes are the same size. Which is what I meant with 'lined up'. Sorry that this wasn't clear. – Danny van der Kraan Apr 09 '13 at 07:48
If that is the case, you will have to float the labels and the input element. In order to achieve the same size, you will need to give the label element a fixed width. `overflow: hidden;` is now necessary for the parent element because the children are floated (therefore taken out of document flow, and will cause the parent to collapse). – Terry Apr 09 '13 at 13:41

Layout issue CSS

4 Answers4