CODEWITHSUNDEEP
htmlcss
Sebastian
Sebastian

Reputation: 123

Ordering two columns, avoiding skip to new line

I am trying to create a page that shows a label and the corresponding text (might be multi-line), but I do not get the lines from the label and the text in the same line.

HTML Code:

<label for='name'>Name:</label>
<div class='input' id='name'> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<label>Date:</label>
<div class='input' id='date'> 10.10.2012 </div>

<label>Sum:</label>
<div class='input' id='sum'>ABC </div>

CSS:

label {

width:150px
float: left;

}

.input{
margin-left:150px
}

Here is the JSFiddle Link

Upvotes: 1

Views: 89

Answers (5)

Dmitriy Golub
Dmitriy Golub

Reputation: 21

Missing ";" after 150px and clear:both after div

   label {
        width:150px;
        float: left;
        display: block;
        border: 1px solid red;   
    }
    .input{
        margin-left:150px;
    }

    br {
       display: block;
       clear: both;
    }

http://jsfiddle.net/DGolub/msvVc/1/

Upvotes: 2

Sowmya
Sowmya

Reputation: 26979

Semicolon ; is missing after width:150px

Correct it. It works

DEMO

Upvotes: 2

Epsil0neR
Epsil0neR

Reputation: 1704

You lost in your style ; after width:150px

Try this: JS Bin

label {
  width:150px;
  float: left;
}

Upvotes: 1

gaynorvader
gaynorvader

Reputation: 2657

Put display:block; in .input:

.input{
margin-left:150px;
display: block;
}

Upvotes: 0

Simone
Simone

Reputation: 21272

Try this:

.input{
  display:inline
}

Upvotes: 0

Related Questions