1

this time I try to center one element between other elements. With a table it looks and behaves perfectly like I want it to be. Look at the first blue line in the fiddle (perhaps you need a wider result window to see the right behaviour):

body, div, table, td {
    margin: 0;
    border: 0;
    padding: 0;
}

table, td {
    border-collapse: collapse;
}

.settings {
    background: blue;
}

.settings input.year{
    width: 3em;
}

.settings input.month,
.settings input.day,
.settings input.hour,
.settings input.minute{
    width: 1.5em;
}

.settings input.numbers{
    width: 2em;
}

.settings p{
    color: white;
}

/* version without table */
.settingsWithoutTable {
    background: blue;
}

.settingsWithoutTable input.year{
    width: 3em;
}

.settingsWithoutTable input.month,
.settingsWithoutTable input.day,
.settingsWithoutTable input.hour,
.settingsWithoutTable input.minute{
    width: 1.5em;
}

.settingsWithoutTable input.numbers{
    width: 2em;
}

.settingsWithoutTable span{
    color: white;
}
<body>
    ...<br>
    <div class="settings"><table><tr>
        <td><p>From</p></td>
        <td><input class="year" value="2014"/></td>
        <td><input class="month" value="04"/></td>
        <td><input class="day" value="03"/></td>
        <td><input class="hour" value="02"/></td>
        <td><input class="minute" value="01"/></td>
        <td><button>Frst</button></td>
        <td><button>Scnd</button></td>
        <td style="width: 50%"></td>
        <td><button>Push</button></td>
        <td style="width: 50%"></td>
        <td><p>Num</p></td>
        <td><input class="numbers"></input></td>
    </tr></table></div>
    ...
    <div class="settingsWithoutTable">
        <span>From</span>
        <input class="year" value="2014"/>
        <input class="month" value="04"/>
        <input class="day" value="03"/>
        <input class="hour" value="02"/>
        <input class="minute" value="01"/>
        <button>Frst</button>
        <button>Scnd</button>
        <span style="width: 50%"></span>
        <button>Push</button>
        <span style="width: 50%"></span>
        <span>Num</span>
        <input class="numbers"></input>
    </div>
</body>

Now I heared that tables aren't for layout nowadays and that's why I try to get rid of it. Everything I tried like inline-blocks and so on brings bad results like newlines.

The result should stay in one line and the elements should be aligned like in the table version.

Is there a good way just with css?

caligula
  • 192
  • 1
  • 10
  • Add some divs and then assign each div a specific width and set the text-align property equal to center, where you want it to be centered; @caligula – Asif Mehmood Mar 31 '15 at 18:46
  • you've heard wrong. people who say that tables aren't used for layouts nowadays are simply arrogant. if table suits your needs, then by all means use it. if you want to achieve the same functionality, you can build a table by setting "celled" rows of divs with display set to `table row`/`table-cell` for the corresponding divs. there are also other ways to achieve the desired result, but that would be off topic on stack overflow as it is a matter of opinion. – Banana Mar 31 '15 at 18:48
  • Tables aren't for **general** page layout, this is now the accepted norm. However, for tabular data and, many feel, form layout, they are considered appropriate. If a table solves your problem, go ahead and use a table..the purists be damned. – Paulie_D Mar 31 '15 at 18:48
  • @Banana Does using tables for layout not cause a problem with semantics? If your "layout" isn't tabular data, then isn't that wrong? – Lynel Hudson Mar 31 '15 at 18:53
  • That was, what I heared too. And it sounds right :/ – caligula Mar 31 '15 at 18:58
  • @LynelHudson problem with semantics? im sorry, does using a table for layout breaks your internet and causes your computer to spontaneously combust? there is no rule or standard about not using tables. the fact that there is a better alternative and that most people not do it anymore, doesnt make it wrong. like paulieD said, not using a table for general page layout is the *accepted norm*, its not wrong or anything. – Banana Mar 31 '15 at 18:59
  • @MalikAsifComsats I'll try that in a sec.. – caligula Mar 31 '15 at 18:59
  • @Banana can you nest two tables (try it if it is possible. I could'nt do this)? – Asif Mehmood Mar 31 '15 at 19:02
  • @malik, there is absolutely no problem whatsoever with nesting two or a hundred tables. – Banana Mar 31 '15 at 19:04
  • But still, if you want to do a lot of nesting/colspan/rowspan kind of stuff then i would recommend using the div/span elements @Banana – Asif Mehmood Mar 31 '15 at 19:09
  • @malik, i would recommend so too, but it doesn't make table using any wrong. – Banana Mar 31 '15 at 19:10
  • Yes, i love using tables but when i have to apply some tabular data. Not for the headers/footers(and the responsive ones) at least @Banana – Asif Mehmood Mar 31 '15 at 19:13
  • @MalikAsifComsats I thought about your proposal in the beginning, but I don't want specific widths... – caligula Mar 31 '15 at 19:45
  • @Banana This discussion is already here :) http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – caligula Mar 31 '15 at 19:46

5 Answers5

0

try this

html: 

<div class="settingsWithoutTable">
       <div class="fromColumn">
        <span>From</span>
        <input class="year" value="2014"/>
        <input class="month" value="04"/>
        <input class="day" value="03"/>
        <input class="hour" value="02"/>
        <input class="minute" value="01"/>
        <button>Frst</button>
        <button>Scnd</button>
        </div>

        <div class="buttonColumn">
        <span style="width: 50%"></span>
        <button>Push</button>
        </div>

        <div class="numColumn">
        <span style="width: 50%"></span>
        <span>Num</span>
        <input class="numbers"></input>
            </div>
    </div>

css:

.fromColumn, .buttonColumn, .numColumn{
    background:blue;
    display: inline-block;
    float:left;
    width:33.33%;
    padding:10px 0px 10px 0px;
}
.buttonColumn {
    text-align:center;
}
.fromColumn {
    text-align:left;
}.numColumn {
    text-align:right;
}
jmespinosa
  • 245
  • 1
  • 6
  • 9
  • this is actually the best answer so far but there are still newlines, if the window width changes and i'd prefer a solution without a fixed width for any column... – caligula Mar 31 '15 at 19:56
0

You can center the span and input elements with this CSS. 

.settingsWithoutTable{
 padding:10px;   
}

If you need less space on the sides you can do something like this.

 .settingsWithoutTable{
     padding:10px 5px;   
 }

The first number is for the top and bottom and the second number is for the sides.

CSS shorthand runs clockwise starting from the top.

andre mcgruder
  • 1,120
  • 1
  • 9
  • 12
0

Take a look at this markup using floats:

Here is the fiddle

Css:

.col {
    float: left;
    margin-right: 10%;
}
.col-right {
    float: right;
}

HTML

<div class="settingsWithoutTable">
  <div class="col">
    <span>From</span>
    <input class="year" value="2014"/><input class="month" value="04"/><input class="day" value="03"/><input class="hour" value="02"/><input class="minute" value="01"/><button>Frst</button><button>Scnd</button>
  </div>
  <div class="col">
     <button>Push</button>
  </div>
  <div class="col-right">
    <span style="width: 50%"></span>
    <span style="width: 50%"></span>
    <span>Num</span>
    <input class="numbers"></input>
  </div>
</div>
Antonio Smoljan
  • 2,187
  • 1
  • 12
  • 11
0

Here is a revision to what I added earlier. It gets you exotically what you are looking for. and the middle button stays directly in the middle. 

.settingsWithoutTable{
    padding:10px 0
}

Padding to the top and bottom.

.settingsWithoutTable input, .settingsWithoutTable button{
    margin:-4px
}

Brings the inputs and buttons together.

.settingsWithoutTable button:last-of-type{
    margin-left:31%
}

.settingsWithoutTable span:last-of-type, .settingsWithoutTable input:last-of-type{
    float:right;
        margin:0
}

Floats the last span and input to the right.

You have to flip the last span and input in the Div with the .settingsWithoutTable class because of how the float right renders them.

Like so.

<input class="numbers"></input>
<span>Num</span>
andre mcgruder
  • 1,120
  • 1
  • 9
  • 12
  • thanks for the second answer! Doesn't look bad except for small windows: Linebreaks appear and everything gets messed up... – caligula Apr 02 '15 at 11:02
0

If you dont mind waiving support for older IE browsers, you could use FlexBox

Simply set the display of the 'row' to flex and adjust the 'cells' accordingly.

/* version without table */

.settingsWithoutTable {
  background: blue;
  display: flex;
  min-width: 400px;
}
.settingsWithoutTable .center {
  text-align: center;
  width: 100%;
}
.settingsWithoutTable input.year,
.settingsWithoutTable > button,
.settingsWithoutTable span {
  max-width: 3em;
  min-width: 3em;
}
.settingsWithoutTable input.month,
.settingsWithoutTable input.day,
.settingsWithoutTable input.hour,
.settingsWithoutTable input.minute {
  max-width: 1.5em;
  min-width: 1.5em;
}
.settingsWithoutTable input.numbers {
  max-width: 2em;
  min-width: 2em;
}
.settingsWithoutTable span {
  color: white;
}
<div class="settingsWithoutTable">
  <span>From</span>

  <input class="year" value="2014" />
  <input class="month" value="04" />
  <input class="day" value="03" />
  <input class="hour" value="02" />
  <input class="minute" value="01" />
  <button>Frst</button>
  <button>Scnd</button>
  <div class="center">
    <button>Push</button>
  </div> <span>Num</span>

  <input class="numbers" />
</div>

Here is your Fiddle to play with the widths

Banana
  • 7,424
  • 3
  • 22
  • 43