8 replies to this topic

[DarkLordofthePenguins]

I am trying to make a horizontal bar graph with divs. It's pretty easy if I just have them on separate lines. I just write:

<div class="horizontal_bar" style="width:100px"></div>

.horizontal_bar{

	height: 13px;

	background-color: red;

}

If I do that, I get a red bar that's 100 pixels wide and 13 pixels high. But I want to add a label to the left of the div, so I've made it inline, like this:

display: inline;

For some reason, this overrides the 100 pixel width I specified and makes it so that the width of the div is equal to the width of the contained elements, not 100 pixels. That is to say, if I have a div that I've set to 100px and it has a single 5 pixel wide asterisk in it, the resulting width of the div is 5 pixels. If there's nothing in the div, it doesn't show up at all.

This is the reason I hate CSS. If I could just fix this problem, then all my frustrations would be gone and my relationship with this particular markup language would be much more positive. Can anyone help me on this?

EDIT: I'm aware that it's bad practice to use inline styles. That's not the issue, so please don't bring it up.

[DarkLordofthePenguins]

I'm guessing that no one else knows the solution to this problem either. My conclusion is that CSS sucks.

[Alexander]

CSS requires full knowledge of semantic markup which many do not have, that is why it is confusing.

Can you provide a full working example of your problem? I cannot replicate it from what you had written, Maybe try it with a <span>, two nested spans should fit nicely into eachother, divs are only suitable for containers.

[ethikz]

exactly that is why no one but nullw0rm can help lol

[wim DC]

I didn't answer as i can't replicate your problem. In chrome okay i see no div( width 0 i assume) but it works just normal in IE. And works ok if i use "display:inline-block" in chrome.

It also works in both chrome and IE if I use the normal "display:inline" together with "position:absolute".

Inline should be the default tho, no?

[DarkLordofthePenguins]

The default for divs is display:block.

[Joanzn]

Isn't a <div> tag used for block elements....I think u should try a <span> (inline) tag instead?

[DarkLordofthePenguins]

Divs can be either inline or block, depending on how the attribute is set. Making them inline allows you to put multiple divs side by side rather than having an automatic newline between each of them.

[Vladimir]

Hi,

You can use "display: inline-block" and it will work in IE 9 and other major browsers. If you want it to work in IE 6/7/8 you have to change div to span.

You can either use "float: left" instead of "display: inline-block" to get desired result.

Test page: http://loutontheweb....line-block.html