-1

could someone help me with an example how to accomplish following layout? Is tables the best for this?

https://gyazo.com/80a2f66d280c480c1e6e70637959b271

I do not want to hardcode the width of the elements because I need it to be responsive aswell, thats why I am having a hard time..

So basicly I need it centered but not text-align centered. Appreciate all the help I could get.

4
  • 3
    can you share the code you have so far? Oct 18, 2016 at 20:33
  • 1
    You should post code. What did you try so far?
    – Daniel
    Oct 18, 2016 at 20:34
  • What DouglasCamargo said. Also tables are never the best layout for anything, unless you're dealing with data best expressed in a table, e.g car specifications, employee names... Oct 18, 2016 at 20:35
  • Ya tables are never a best approach for layout,you can consider flex/grid layot for this
    – Geeky
    Oct 18, 2016 at 20:35

4 Answers 4

1

Don't use tables, this makes it hard to optimize the website for mobile devices. Here's what I would do:

body {
  font-family: Arial, sans-serif;
  color: #444444;
}

.info {
  border: 1px solid #bbbbbb;
  border-width: 1px 0;
  padding: 10px;
}

.row {
  line-height: 30px;
  padding: 10px;
}

.label {
  display: inline-block;
  width: 30%; /* You may want to adjust this property */
  margin: 0 10px;
  text-align: right;
  font-size: 95%;
  color: #888888;
}

button {
  border: none;
  background-color: #43CEAD;
  border-radius: 3px;
  padding: 4px 10px;
  color: white;
  font-size: 90%;
}

.right {
  float: right;
}
<div class="info">
  <div class="row">
    <span class="label">Name:</span>
    John Doe
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Password:</span>
    ********
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Animus Heart ID:</span>
    B0 23459332
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">E-mail:</span>
    john@doe.com
    <button class="right">Edit</button>
  </div>
</div>

1

Why tables? You can set div width in percent, isn't it?

.col--first {
  width: 40%;
  float: left;
  text-align: right;
}
.col--second {
  margin-left: 1%;
  width: 59%;
  float: left;
}
.col--second:after {
  content: '';
  display: table;
  clear: both;
}
.right {
  float: right;
}
<div>
  <div class="col--first">Name:</div>
  <div class="col--second">John
    <button class="right">Edit</button>
  </div>
  <div class="col--first">Password:</div>
  <div class="col--second">******
    <button class="right">Edit</button>
  </div>
</div>

0

Have a look at responsive tables:

.table {
    display: table;
}
.table > .row {
    display: table-row;
}
.table > .row > .cell {
    display: table-cell;
}
<div class="table">
  <div class="row">
    <div class="cell">
      First
    </div>
    <div class="cell">
       Second
    </div>
    <div class="cell">
      Third
    </div>
  </div>
</div>

0
#img {
    width: 100%;
    margin: 0 auto;
}

Width can be changed to reflect the desired size of the image, but this will center the image based on the parent element's size by dividing the two margins equally on the left and right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.