Question

Hey there, can someone help diagnose this CSS issue, as I have no idea what the beep is going on;

Here’s my CSS:

#navigation {
display: inline;
}

.download {
width: 10px;
height: 40px;
}

.steps {
width: 90px;
height: 40px;
}

And here’s my HTML:

<div id="navigation">
<div class="download"></div>
<div class="steps"></div>
</div>

For some reason, even though display:inline; is being used, the classes still drop below one another.

And before someone comments on why I’m not using a unordered list to create my navigation, this is meant to be quickie job with a pretty low pay, so the best form isn’t what I’m going for. That said, I’ve been trying to diagnose this issue for over half an hour, and I’m stumped. I’ve clearly made an obvious mistake, I just can’t pick up on it.

Any help would be greatly appreciated :).

Answer 1

You could just float all of your divs left and achieve the same result.