Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

I can't get my form dropdowns to line horizontally

I want the two last drop downs in my form to line up horizontally so they are smaller than the others above it but inline with each other however I can't get them to sit on the same line:

Here is an example:

http://jsfiddle.net/LvhCh/9/

Any idea what I can do I have made them inline blocks?

Thanks

3 Answers

Nathaniel Miller
Nathaniel Miller
8,802 Points
Nathaniel Miller
Nathaniel Miller
8,802 Points

Hmmm...I popped your code into www.codepen.io and they are inline there. Perhaps exploring some of bootstrap's classes would be helpful?

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Yeah that might be worth a shot, it doesn't work in the browser either.

Saulius K
PLUS
Saulius K
Courses Plus Student 15,928 Points
Saulius K
Saulius K
Courses Plus Student 15,928 Points

Add a width of 50% to each, removing the position and display.

.price-range-left {
    float: left;
    width: 50%
}

.price-range-right {
    float: right;
    width: 50%;
}

Or add a width of 50% and remove the float.

.price-range-left {
    width: 50%;
    display: inline-block;
    position: relative;

}
.price-range-right {
    width: 50%;
    display: inline-block;
    position: relative;
}

Edit: Also remove any space in between the select elements if using the display / position method. A single space will mean the two will exceed the 100% together, and will drop the second select down.

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

I came up with a similar answer as Saulius. http://jsfiddle.net/LvhCh/34/ I noticed that .price-range-left should be .price-left and your .car-finder-container should be modified to contain the floats (i.e clearfix, overflow:hidden).