Cannot affect css worth a darn

Question

I'm new to Foundation and jQuery SelectBox. That said, I have wasted all night trying to accomplish a simple task and with virtually no results at all.

I have this HTML:

<!--  Top Nav -->
<div class="nav row">
    <div class="small-3 columns">
        <select id="team" name="team">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </div>
    <div class="gear small-1 columns">
        <a href="#"><img id="teamSettingsGear" src="/images/settings.png" alt="Team Settings" /></a>
    </div>
    <div class="small-3 columns">
        <select id="site" name="site">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>   
    </div>
    <div class="gear small-1 columns">  
        <a href="#"><img id="siteSettingsGear" src="/images/settings.png" alt="Site Settings" /></a>
    </div>
    <div class="small-3 columns">
        <select id="info" name="info">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>   
    </div>
    <div class="gear small-1 columns">
        <a href="#"><img id="informationGear" src="/images/settings.png" alt="Information" /></a>   
    </div>
</div>

It's using both Foundation 4 and a jQuery plugin called SelectBox by Ivanov.

Here is my attendant css:

.header, .help, .content, .footer {
padding-top: 10px;
} 

.content {
height: 500px;
}

.inventory, .multipurpose, .cart {
text-align: center;
}

.nav {
position: relative;
top: -15px;
}

.gear {
padding-left: 0px !important;
margin-left: 0px !important;
}

All I want to do is have the gear float to the right of the select box, with maybe 10px in between.

If I put the selectbox and the gear image in the same div, the gear image gets put on the next 'line' down.

If I mess with position: relative; left: -whatever, then the gear does move closer to the select box, but because it's a responsive css toolkit, all I have to do is widen the browser to space them out again. Conversely, if I shrink the browser window, the gear floats over the select box.

I tried having the select box float left and the image float right, but that didn't work (the gear continued to get bumped down), and I wondered if it was because neither is a block element. — Lurk21, Apr 05 '13 at 02:49
@LynnOwens things are't always as bad as they seem. Check my answer. Hopefully that fixes you up. — iGanja, Apr 05 '13 at 03:00
Arun's fiddle is close - but with the window fully open, the gear is too far to the right of the select box. And when the window is narrowed very much, the gears quickly cross on top of the select box. — Lurk21, Apr 05 '13 at 03:07
@LynnOwens that fiddle won't help you as that doesn't reference Foundation and so you lose the styles you have with Foundation. — von v., Apr 05 '13 at 03:16
I have no idea what Foundation is, but I can't see how that should matter with such a simple CSS problem. have you checked my fiddle? http://jsfiddle.net/iGanja/L8vdh/ — iGanja, Apr 05 '13 at 03:20
@iGanja, it matters a lot and [reading about Foundation here specially about their grid system](http://foundation.zurb.com/docs/components/grid.html) will give you an idea why. — von v., Apr 05 '13 at 03:24
well, I used the same classes in my fiddle, so I can only go on what is given to me. I'm certainly not going to read a novel about something I care nada about... Don't be afraid to modify a canned solution if it doesn't work for you. cheers! — iGanja, Apr 05 '13 at 03:26

score 2 · Accepted Answer · answered Apr 05 '13 at 03:15

You don't need to add additional styles to align your image with your dropdown using Foundation. Remember that if you put two elements in a row in each column it will float to the right of each other. Try removing all of your styles for positioning and just leave those where you would like to have additional padding or margin. This fiddle shows you how to accomplish it.

For the mobile view, remember that a lot of mobile devices are small, you can have users using 240x400 devices. To cater to those small devices you have to split your columns so they will really be responsive and not tuck them all in one row. The sample below that is also in fiddle shows how you can accomplish it. Now of course you can change the 8 and 4 combination to suit your need. But basically that's the idea on how you can properly present your elements on small devices.

<div class="nav row">
    <div class="small-8 large-3 columns">
        <select id="team" name="team">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </div>
    <div class="gear small-4 large-1 columns">
        <a href="#"><img id="teamSettingsGear" src="img/gear.png" alt="Team Settings" /></a>
    </div>
    <div class="small-8 large-3  columns">
        <select id="site" name="site">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>   
    </div>
    <div class="gear small-4 large-1 columns">  
        <a href="#"><img id="siteSettingsGear" src="img/gear.png" alt="Site Settings" /></a>
    </div>
    <div class="small-8 large-3 columns">
        <select id="info" name="info">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>   
    </div>
    <div class="gear small-4 large-1 columns">
        <a href="#"><img id="informationGear" src="img/gear.png" alt="Information" /></a>   
    </div>
</div>

That is perfect, and now I think I understand better. Thank you so much, everyone. — Lurk21, Apr 05 '13 at 03:21
Glad the community were able to help you out. It's always fun to learn something new. — von v., Apr 05 '13 at 03:25

score 1 · Answer 2 · answered Apr 05 '13 at 02:56

1

.columns { float:left; }

.clear { clear:both; height:0; }

here is a working fiddle for you:

http://jsfiddle.net/iGanja/L8vdh/

answered Apr 05 '13 at 02:56

iGanja

2,374
2
28
32

Cannot affect css worth a darn

2 Answers2