Firefox won't inline my divs! Problem with width.

**wishiwasageek** · 05-31-2005, 09:07 AM

I'm soo tempted to go back to tables...

this css/html combo works in IE 6.0 but not in FF 1.04 - what am I specifying wrong??
I simply(!) want the text to be next to the image, like this

HTML Code:

<TR>
<TD>this cell has lots of text</TD>
<TD>this cell has an image, aligned to the top, and has a width of 264px</TD>
</TR>

thanx
WIWAG

CSS code:

Code:

.fullpage {max-width:610px; width:610px;}

.lefttext {display:inline; max-width:125px; padding-right:5px;}
					 
.rightimage {display:inline; vertical-align:top; text-align:top; min-width:264px}

.img1 {outline:1px black solid; width:264px; height:126px;}

HTML code:

HTML Code:

<body>
<div class="fullpage">
<div class="lefttext">
<ul>
<li><P>lots and lots of text lots and lots of text lots and lots of text lots and lots of text lots and lots of text 
<li><P>text lots and lots of text lots and lots of text
<li><P>text lots and lots of text lots and lots of text
<li><P>lots and Lots of text lots and lots of text text lots and lots of text lots and lots of text text lots and lots of text lots and lots of text 
</ul></div>
<div class="rightimage"><img class="img1" border="1" src="../Images/GS_Find_BBSButton.gif" alt="Screen capture"/>
</div>
</div><!-- end fullpage -->
</body>

**mwinter** · 05-31-2005, 12:01 PM

Originally Posted by wishiwasageek

this css/html combo works in IE 6.0 but not in FF 1.04 - what am I specifying wrong??

When something 'works' in IE, but not in Firefox, there's usually something wrong.

I simply(!) want the text to be next to the image, like this

HTML Code:

<TR>
<TD>this cell has lots of text</TD>
<TD>this cell has an image, aligned to the top, and has a width of 264px</TD>
</TR>

You'd be better off floating the image to the right:

HTML Code:

<div>
  <img alt="Screen capture" src="..." style="float: right;">
  <ul style="margin-right: 264px;">
  <!-- ... -->
  </ul>
</div>

though you shouldn't really use inline style attributes. The right-hand margin ensures consistent space down that side, rather than having the text of list items that begin below the image flowing underneath.

If the image is a screen capture, it would be better to have no alternative text, unless you're willing to describe that image in detail (which is what I'd assume the 'lots and lots of text' is doing, anyway). If the image does just illustrate an existing textual description, then it is solely decorative and shouldn't have an impact on the content if the image isn't loaded.

As for why your suggestion doesn't work: ul elements are also block-level. You shouldn't try to make inline elements (or block-level elements styled inline) contain block level elements. As far as I'm aware, behaviour isn't defined if you do.

Mike

**wishiwasageek** · 05-31-2005, 11:50 PM

so do you always have to float one of the inline divs inline for them to line up in firefox?
thanx for your answer btw

WIWAG

**wishiwasageek** · 05-31-2005, 11:54 PM

Re. Inline and block - but surely the div is a block(?) and then told to be inline
Doesn't the div "contain" the ul so it can be a block element within a block element (the div?)
I mean does the inline property/attribute(?) get inherited by the UL?

I thought that was the point of Divs to do whatever, but it didn't matter what you put inside them.

Thanx heaps as usual.

WIWAG

**jscheuer1** · 06-01-2005, 04:07 AM

Well, ul's li's have the default display of 'list-item' so, the division will not change that.

Originally Posted by blooberry.com - allowed values for display property

list-item
[CSS1|CSS2] [IE6|N4B2|O4]
Type: Explicit
Description:
This causes the element to generate a block box for the content and a separate list-item inline box.

**wishiwasageek** · 06-01-2005, 04:55 AM

ok - but does the image have to be specified first?

thanx

**jscheuer1** · 06-01-2005, 05:19 AM

It depends upon how you want it to look, there are only about 8 possibilities, play with it. You could float the division or the image left or right and have one or the other first.

**mwinter** · 06-01-2005, 02:37 PM

Originally Posted by wishiwasageek

so do you always have to float one of the inline divs inline for them to line up in firefox?

I'm afraid you (or I) seem to have confused the issue. The floating suggestions in that I made in your previous two positioning questions were meant to replace what you had. For instance, what I posted previously in this thread would achieve, more or less, the layout I believe you wanted if used as-is. All that was really necessary was for you to move the style data into a style sheet, add the content, and include any extras like padding, colour, borders, and the like.

You wanted to inline the div elements so that they would appear side-by-side. However, floating them would do the same thing, so question of inline vs. block is irrelevant (though you should leave them block, in my opinion).

Mike

**wishiwasageek** · 06-01-2005, 11:57 PM

So either use display:inline OR float:<left/right> as properties of the div, to put two (or more) divs next to each other?

Float seems to be useful as you can specify height and width etc, which I have now learnt you can't do with inline elements (right?)

Thanx guys - going to do some studying re. block, inline etc.

WIWAG

Thread: Firefox won't inline my divs! Problem with width.

Thread Tools

Search Thread

Firefox won't inline my divs! Problem with width.

Bookmarks

Bookmarks

Posting Permissions