SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    San Jose
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Width of inline div's not working in Gecko based browser

    Im trying to put two div's side by side (as an inline component)

    example


    <div style='display:inline;height:20px;width:50px;border:1px solid black'>1</div>
    <div style='display:inline;height:20px;width:50px;border:1px solid black'>2</div>

    For some reason, the width is not working in gecko based browser (it's not showing 50px)

    Thanks

    -Don
    Last edited by donny_ryan_chong; Aug 17, 2004 at 17:17.

  2. #2
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hey Don, welcome to sitepoint.
    As ever, I tend to give a short answer and an incredibly long, painful, protracted answer. But, seeing as you're new and I'm tired I won't.... this time

    Super short answer: This should sort you.
    Code:
    <div style='float:left;height:20px;width:50px;border:1px solid black'>1</div>
    <div style='float:left;height:20px;width:50px;border:1px solid black'>2</div>
    Slightly longer answer: Are you sure you know what it means to set the display to "inline"? I ask because, strictly speaking, you shouldn't be able to set the width of an inline element. (Same goes for a block element with its display set to inline as you have). It should always be determined by it's containing block. (I'm curious to know which browser this did work for you in.) If you want to be able to set the width of an element then it has to be a block element. Then, if you want those two block elements to wrap and sit together, you need to float them.

    Here's the official explanation if "inline". http://www.w3.org/TR/REC-CSS2/visure...ine-formatting

    If you're confused and don't fancy wading through the w3c explanation, just say and I'll clarify.

    John

  3. #3
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just remembered, Mike Hall's brainjar.com has an excellent article explaining all this stuff.
    Reading from the paragraph "Box Types" down to the end of the next page will clear up all of that.
    http://www.brainjar.com/css/positioning/default.asp
    It's a good article to read for the fundamentals anyway and it has illustrated examples which are always a good thing.

  4. #4
    SitePoint Member
    Join Date
    Aug 2004
    Location
    San Jose
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank's for the reply.

    Im kinda confused with the line box concept, is that a imaginary container built in to inline elements?

    The reason that i used the display:inline so that I can tile the div's together (instead of using span). So does that mean when you specify float:left to an element, the element will position on the right most edge of the prior element or leftmost edge of the container?

    I tried this code

    <div style='width:100px;border:1px solid green'>
    <span>1</span>
    </div>

    How come the span does not follow the width of the containing block?

    Internet explorer works with specifying the width of the inline element. I guess it does not comply with the w3c.

    Thank you very much.

    -don

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Internet explorer works with specifying the width of the inline element. I guess it does not comply with the w3c.
    IE6 will only render the width of an inline element when you are in quirks mode (i.e. no doctype or partial doctype). It is not according to the specs but quirks mode is about supporting legacy behaviour.

    As john said above you should just float the elements side by side and his example above should work fine for you .

    Paul

  6. #6
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is that a imaginary container built in to inline elements?
    It's not imaginary in the sense that it has an effect on how things are rendered but yes it is the container for each line of inline elements. It's what keeps the bottoms of all these letters alligned.

    It's imporant to realise that Inline elements and line boxes are not the same thing. Line boxes are inside inline elements and are a function of how the browser renders text.

    So for example, if an inline element on a page, a span say, has so much text in it that the text wraps so you have ten lines of text on that page, then you've got ten line boxes in that span. You can't manipulate it's width though, that's the browser's responsibilty. Line boxes will just keep wrapping and will be formed and discarded dynamically as you resize the browser window or increase the text size.

    So I could see your rationale but when you set a div's display to inline you're effectively telling the browser to render it as though it was an inline element. So you may just as well have used a span in the first place.

    float represents the middle ground. Your block level elemement maintains all the properties that you want to be able to manipulate (height, width) but allows you to get it to sit into the flow of the line box that precedes it.

    So does that mean when you specify float:left to an element, the element will position on the right most edge of the prior element or leftmost edge of the container?
    Um ... well both. It'll sit at the leftmost edge of the container if there aren't any other floated block elements to get in the way. If there is something in the way it'll just scootch up next to it. (http://www.brainjar.com/css/positioning/default4.asp illustrates this perfectly. You may have to go back a page to get the context)
    Floats' horizontal alignment are determined this way but their vertical is determined by the line box that precedes it.

    I tried this code

    <div style='width:100px;border:1px solid green'>
    <span>1</span>
    </div>

    How come the span does not follow the width of the containing block?
    Spans are inline. You can't set their width. (Ok, so in quirks mode you can but quirks mode is the devil THE DEVIL I TELL YOU. Nah not really but, like Paul says, its just there to accomodate old pages without proper doctypes)
    Spans and all inline elements will automagically collapse to fit around their content. If you really need it to you can define its display as block.

    Clear as mud?

    Maybe if you show what you're trying to achieve we can help.
    I appreciate that putting the css inline makes it easier for us to debug these little examples but just want to check that you know that it's really not a good idea to do it in a working page. You do know that?

  7. #7
    SitePoint Member
    Join Date
    Aug 2004
    Location
    San Jose
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for the help =) you guys are the coolest!

    Anyways, Ill look into the quirksmode. There is no specific page right now. Just trying to understand the css positioning. Kinda tricky and needs a lot of practice.

    Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •