CODEWITHSUNDEEP
htmlcss
Ronaldo
Ronaldo

Reputation: 367

put div on different line

I want to build a list of itens. Each item should be in one line, like several paragraphs.

Why my div.empresa elements are on same line? I think they should be on different lines because the display property of them is block.

Take a look at code: http://jsfiddle.net/Yz8Cq/

Upvotes: 3

Views: 17163

Answers (4)

dezman
dezman

Reputation: 19358

The float: left; is making them do that.

Upvotes: 2

Ben Jacobs
Ben Jacobs

Reputation: 2526

Get rid of the float: left; in #ListaDeEmpresas .arrow

Upvotes: 2

jackwanders
jackwanders

Reputation: 16010

Actually, removing float: left from the label will make the arrow span appear to the left of the label. Assuming you want the arrow spans to continue to show up on the right of the labels, then you want to add:

#ListaDeEmpresas div.empresa {
    clear: left;
}

This will make sure each label/span set appears below the previous one.

Upvotes: 3

SpaceBeers
SpaceBeers

Reputation: 13947

You need to remove float: left;

#ListaDeEmpresas .arrow {
    height: 50px;
    width: 20px;
    background: url("/Content/SetaBrancoh40.png") no-repeat center center;
    background-color: #A9462F;
}

http://jsfiddle.net/spacebeers/Yz8Cq/5/

Floats can be a bit tricky to get your head around at first. This article is excellent - http://css-tricks.com/all-about-floats/

Upvotes: 11

Related Questions