CODEWITHSUNDEEP
htmlcss
Fireworksable
Fireworksable

Reputation: 343

Can someone diagnose this CSS issue?

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 :).

Upvotes: 1

Views: 73

Answers (4)

rid
rid

Reputation: 63442

The parent div is inline, not the children. You haven't done anything with the children, they're still block. Your problem will likely be solved if you make the children inline-block though, with:

.download, .steps {
    display: inline-block;
}

Or you can float them:

.download, .steps {
    float: left;
}

#navigation {
    overflow: hidden;
    zoom: 1; /* if you care for the anti-browser */
}

All this is if you do care for them to keep the width and height you specified, while keeping them next to each other.

Upvotes: 3

superUntitled
superUntitled

Reputation: 22527

Try adding a style on the div's in the #navigation div...

#navigation, #navigation > div {
display: inline;
}

Upvotes: 0

Dave Kiss
Dave Kiss

Reputation: 10487

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

Upvotes: 1

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93434

I don't believe divs inherit their parents display property by default, and divs are block. So you would have to set both .download and .steps to also be display:inline

You could also create a selector like:

#navigation div { display:inline; }

More than likely, you want #navigation to be block anyways, since you will probably want the navigation container to be block.

Upvotes: 0

Related Questions