Bringing the html elements order properly?

Question

I have below html page:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-right:50px; } .value{ padding-left:50px; } </style> </head> <body> <div id="wrapper"> <div id="score"><span class="header">Score:</span><span class="value">10</span></div> <div id="dd-1"><span class="header">Has Account</span><span class="value"><select name="" id=""> <option value="">Yes</option> <option value="">No</option> </select></span></div> <div id="dd-2"><span class="header">Has House</span><span class="value"><select name="" id=""> <option value="">Yes</option> <option value="">No</option> </select></span></div> <div id="dd-3"><span class="header">Has Phone</span><span class="value"><select name="" id=""> <option value="">Yes</option> <option value="">No</option> </select></span></div> </div> </body> </html>

All the values are not displayed in order. How can i bring all the values order properly?

Thanks!

Order means, Are you talking about indentation and postion?

Harish Boke
– Harish Boke

2014-02-21 11:30:12 +00:00
Commented Feb 21, 2014 at 11:30 — Harish Boke
– Harish Boke, Commented Feb 21, 2014 at 11:30

Harish Boke · Accepted Answer · 2014-02-21 11:32:39Z

1

You are applying padding to the inline element so it won't replicate your change first of all you have to make it display:inline-block and then specify width per your structure

Fiddle: http://jsfiddle.net/HarishBoke/8HgHe/

answered Feb 21, 2014 at 11:32

Harish Boke

5573 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

Why so complicated, can be done with only one selector

Harish Boke Over a year ago

yeah, we can achieve with tag selector also, but i intentionally define with classes, as per his structure

Suresh Pattu · Accepted Answer · 2014-02-21 11:31:29Z

Working Demo is here Jsfiddle

Here is the Css changes you have to

.header{ padding-right: 50px; min-width: 120px; display: inline-block; } .value{ padding-left:50px; display: inline-block; }

yashhy · Accepted Answer · 2014-02-21 11:28:54Z

How about using a simple table?

<table> <tr> <td>Score:</td> <td>10</td> </tr> <tr> <td>Has Account:</td> <td> <select name="" id=""> <option value="">Yes</option> <option value="">No</option> </select> </td> </tr> <tr> <td>Has House:</td> <td> <select name="" id=""> <option value="">Yes</option> <option value="">No</option> </select> </td> </tr> <tr> <td>Has Phone:</td> <td> <select name="" id=""> <option value="">Yes</option> <option value="">No</option> </select> </td> </tr> </table>

FIDDLE

kirilloid · Accepted Answer · 2014-02-21 11:30:05Z

You can't set with for inline elements, but inline-block will work for you.

.header { display: inline-block; width: 150px; }

Collectives™ on Stack Overflow

Bringing the html elements order properly?

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related