CODEWITHSUNDEEP
htmlcss
WhiteAngel
WhiteAngel

Reputation: 2826

Divs are not alligned into one line using display:inline

I got submission form generated with Cobalt 8 Joomla plugin. It has 4 fields: 2 textboxes and 2 selects and each of them is stored in separate div so on the next line. But I need them somehow to be placed on the same line.

I've already tried setting display:inline to these divs but this didn't solve an issue. Looks like that some other styles are breaking my display.

As far as there are a lot of other css files in Joomla I cannot create JSFiddle, but here's the link to the problematic form: Form with divs

I want 4 elements starting from Test 1 label to be displayed in a single line: textbox, select, textbox, select.

I would be appreciated if someone could take a look into this form and explain me why is it failing when using display:inline

Upvotes: 0

Views: 40

Answers (1)

Shomz
Shomz

Reputation: 37701

It still has some layout issues (due to your testing, I assume), but these two rules are crucial: 

.control-group {
    display: inline-block;
    vertical-align: top;
}

Inline-block ensures that those divs still have their paddings and margins while not being full blocks (not taking 100% of the width, thus forcing next non-block elements into new rows).

Vertical-align, as the name says, forces all those inline-blocks to be glued to the top of their parent element. You might not need it when you remove your test thing (like that label, a one or two more elements with added styles). But basically, it allows you to avoid this: 

---   -----    
| |   |   |  ----
| |   |   |  |  |
| |   |   |  ----
---   -----

and have this instead: 

---   -----  ----    
| |   |   |  |  |
| |   |   |  ----
| |   |   |  
---   -----

Note: those photo-realistic graphics represent div boxes.

Upvotes: 1

Related Questions