472,355 Members | 1,945 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,355 software developers and data experts.

Float Left with auto width, jumps to next line if short

dlite922
1,584 Expert 1GB
I'm back again,

Intro:
I've got a floating div (outerDIV) with fixed width that contains an image (IMG) and a div that contains a short text (innerDIV)

Problem:
In FF, the innerDIV is displaying under the IMG because outerDIV is not wide enough to contain both of them (in some instances). In the instances where the outerDIV is wide, I don't have this problem.

IE wraps the text but still keeps it to the right of the IMG. FF doesn't wraps it and puts it on the line below the image. This doesn't work for me because the outerDIV is a fixed height and you can't see the text. (overflow: hidden). Its too short and too ugly to add a vertical scroll (overflow: auto).

Question:
How do I make the innerDIV float to the right of the image and wrap within itself instead of jump under the image? (They're all float:left;)

My Code at this time:

Expand|Select|Wrap|Line Numbers
  1.  
  2. .outterDIV {    
  3.     position: relative;
  4.     float: left;
  5.     width: 200px;
  6.     height: 73px;
  7.     overflow: hidden;
  8.     border: 1px solid white;    
  9. }
  10.  
  11. .IMG {
  12.      position: relative;
  13.     float: left;
  14.     margin-left: 5px;
  15.     margin-top: 5px;
  16.     height: 50px;    
  17.  
  18.     border-bottom: 2px solid #111;
  19.     border-right: 2px solid #000;
  20.     border-top: 2px solid #888;
  21.     border-left: 2px solid #aaa;
  22. }
  23.  
  24. .innerDIV {
  25.     display: inline;
  26.     position: relative;
  27.     float: left;
  28.     width: auto;
  29.     margin-left: 5px;
  30.     margin-top: 5px;
  31.     font-weight: bold;
  32.     font-size: 13px;
  33.  
  34. }
  35.  
  36.  
  37. // Layout is so: 
  38. <outerDIV>
  39.     <IMG />
  40.     <innerDIV>Test Text</innerDIV>
  41. </outerDIV> 
  42.  
Rant:
I've tried combinates of values for display, position, width. but at no avail.

if width is fixed and smaller than the space left, FF will wrap it. But this isn't always the case and I don't want to shorten those that DO have the room to grow.

EDIT: sorry, the title should say jups to next line if too long. As you can see from the screen shot, the Jamie Fox Show text went under the image. In IE the text remains on the right of the image and wraps within inner div. While "Gossip Girl" has 200 px to expand without needing to wrap:
Mar 3 '09 #1
15 16361
TheServant
1,168 Expert 1GB
I have recently run into this problem as well. How I have fixed it is using negative margins. In my problem I had everything in one div and so made a margin-left same size as the width of my img (so that text is moved over) and then made a negative margin for img's. This is all that it is in my css:
Expand|Select|Wrap|Line Numbers
  1. div.links { margin-left: 320px; }
  2. div.links img { margin: 0 0 -70px -320px; }
And my html is:
Expand|Select|Wrap|Line Numbers
  1. <div class="links">
  2.             <a href=# class="link"><img src="http://bytes.com/topic/html-css/answers/.../a_logo.png" alt="a_Logo" /></a>
  3.             <p>My text description.</p>
  4.         </div>
However all my images are roughly the same size, so my -320px is enough for all of them to look uniform and good. This works in IE7, FF, Chrome and Opera, but I haven't tried any IE <7.

</my two cents>
Mar 3 '09 #2
David Laakso
397 Expert 256MB
I'm back again
That's nice. I guess.

Question:
How do I make the innerDIV float to the right of the image and wrap within itself instead of jump under the image? (They're all float:left;)
Putting the page on a public server and providing a clickable link to it in your post to the forum could be a nice touch. Or, could it?
Mar 3 '09 #3
dlite922
1,584 Expert 1GB
I'll try the negative margin if all else fails.

I can't believe that there isn't a valid, non-hack way to do this. My code passes XHTML Transitional W3C Validation. I don't mind changing the structure to other things besides <div> and in that order. I just need the outer element to float left with fixed width.


@David Laakso
This is an intranet application, sorry. Proprietary information.

I think I provided much more than the common OP'er. I've got clear cut sections, code, AND a screenshot.

The rest I can't give you by law, otherwise I would.





Dan
Mar 3 '09 #4
David Laakso
397 Expert 256MB
Major Tom,
Is this what we're trying to do [1]?
This is Ground Control, Houston
[1] http://www.chelseacreekstudio.com/ca/cssd/aaaa.html
Cursory checked in compliant browsers and IE 6/7
Mar 3 '09 #5
drhowarddrfine
7,435 Expert 4TB
Parent elements are never to expand to contain floated elements. (If I'm following what the problem is. Didn't check.) This is a bug in IE. Firefox is performing correctly. To get modern browsers to imitate IEs bug, add 'overflow:auto' to the parent element.

EDIT: I'm freaking out about something right now so I'm not thinking very well right now. Apologies if I just blurt out nonsense. I'm tinkering while freaking waiting for something to happen.

You have overflow:hidden, which will work but the overflow is obviously hidden.
Mar 3 '09 #6
drhowarddrfine
7,435 Expert 4TB
The problem is, in your css, you are trying to style <img> with .IMG but there is no such class assigned to <img>. Change .IMG to img, without the dot.
Mar 3 '09 #7
dlite922
1,584 Expert 1GB
@David Laakso
You've duplicated my problem. To see it in your code, change .c width to auto and you'll see firefox drop it below the image.

As I mentioned in OP, I can set the width to a fixed value, but this also wraps the text if the container is larger than 200px. e.g. 400px, 600px, 1800px.

Maybe what i'm trying to do cannot be done in any "non-negative" way.


@drhowarddrfine
Sorry, Doc, I should have mentioned these aren't the real values (or actual html code). It just converys the point. I throught you might give me more credit than that! ;)


My image class is actually called "eventImage", the text is called "eventName", and the container is called "event".
Mar 3 '09 #8
dlite922
1,584 Expert 1GB
By the way, A solution that doesn't work for me but could be possible for someone else is doing this with position absolute on the childs and position: relative on the container.

The reason I don't want to do this is because my images are two types of width. If the text is a fixed length to the right, there will be a "wasted" space if the image is actually narrower than those shown in the screen shot. (e.g. movie images are rectangular)

On second thought, I think i'll implement this because I just realized no movie will have a 200px width (~ half-hour) DUH!! , they're atleast 1.5 hours (3x200px = 600px).

I really appreciate the responses and discussions I trigger here. That's why I love bytes. (The sense of humor is the icing on the cake)

See you guys later,






Dan

EDIT: I forgot to mention that position absolute also has a problem of not wrapping, but for me it will atleast display the first part of the text.

Here's the modified sample code:


Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta name="generator" content="HTML Tidy for Windows (vers 1st January 2002), see www.w3.org" />
  6.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.     <title>:: aaaa ::</title>
  8.  
  9.  
  10.     <style type="text/css">
  11.         .a {
  12.             position: relative;
  13.             float: left;
  14.             width: 200px;
  15.             min-height: 73px; /*hard code the height if you want it to shoot out the bottom of the block with font-scaling*/
  16.             overflow: hidden;
  17.             border: 1px solid fuchsia;
  18.         } 
  19.         .b {
  20.             position: absolute; 
  21.             width:70px;
  22.         }
  23.         .c {
  24.             position: absolute; 
  25.             left: 67px;
  26.             width: 500px;
  27.         } 
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="a">
  32.         <div class="b">
  33.             <img src="major-tom.gif" alt="" width="50" height="50"/>
  34.         </div>
  35.         <div class="c">
  36.             <p>Some unreadable text goes here...</p>
  37.         </div>
  38.     </div>     
  39.     <div class="a">
  40.         <div class="b">
  41.             <img src="major-tom.gif" alt="" width="50" height="50"/>
  42.         </div>
  43.         <div class="c">
  44.             <p>Some unreadable text goes here...</p>
  45.         </div>
  46.     </div>     
  47.     <div class="a">
  48.         <div class="b">
  49.             <img src="major-tom.gif" alt="" width="50" height="50"/>
  50.         </div>
  51.         <div class="c">
  52.             <p>Some unreadable text goes here...</p>
  53.         </div>
  54.     </div>      
  55. </body>
  56. </html>
  57.  
  58.  
Mar 3 '09 #9
David Laakso
397 Expert 256MB
I think you'll need scripting to meet your goal.
Use a negative margin layout (such as this one) concept keeping a fixed width for the left col (to hold the image). Set min-width/max-width on parent block and control the max-width using scripting? This should avoid the float drop when the overall width changes...
http://blog.html.it/layoutgala/LayoutGala31.html
Mar 3 '09 #10
drhowarddrfine
7,435 Expert 4TB
@dlite922
I changed some of that. Here's what I used before:
Expand|Select|Wrap|Line Numbers
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8>
  5. <title></title>
  6. <style type="text/css">
  7. .outerDIV {    
  8.     position: relative;
  9.     float: left;
  10.     width: 200px;
  11.     height: 73px;
  12.     overflow: hidden;
  13.     border: 1px solid white;    
  14. }
  15.  
  16. img {
  17.      position: relative;
  18.     float: left;
  19.     margin-left: 5px;
  20.     margin-top: 5px;
  21.     height: 50px;    
  22.  
  23.     border-bottom: 2px solid #111;
  24.     border-right: 2px solid #000;
  25.     border-top: 2px solid #888;
  26.     border-left: 2px solid #aaa;
  27. }
  28.  
  29. .innerDIV {
  30.     display: inline;
  31.     position: relative;
  32.     float: left;
  33.     width: auto;
  34.     margin-left: 5px;
  35.     margin-top: 5px;
  36.     font-weight: bold;
  37.     font-size: 13px;
  38.  
  39. }
  40. </style> 
  41. </head>
  42. <body>
  43.  
  44. <div class="outerDIV">
  45.     <img src="6.gif">
  46.     <div class="innerDIV">Test Text</div>
  47.  
  48. </div> 
  49. </body>
  50. </html>
  51.  
Mar 4 '09 #11
David Laakso
397 Expert 256MB
Major Tom,
Curious. Only. Do you have an (x)html/css question?

We are, but only...
Ground Control, Houston.

PS
Take your protein pill.
Put your helmet on.
We track you and we hold you on our screens. Lift-off momentarily. Farewell...
Huston
Mar 4 '09 #12
Plater
7,872 Expert 4TB
So there is no good way to mimic the behavior of a 2 column table?
If tables are not to be used for layout, then how can you get objects to sit side-by-side without one of them being forced onto a newline?
Mar 6 '09 #13
David Laakso
397 Expert 256MB
Not sure if you asking with regard to the question of this thread or opening a new thread?
Here are 40 ways to get objects sitting next to each other using CSS without float drop cross-over:
http://blog.html.it/layoutgala/
Or one could use the CSS table model. These are not tables they're just styled to look like tables:
http://www.w3.org/TR/CSS21/tables.html
Mar 6 '09 #14
Plater
7,872 Expert 4TB
Well it was meant for this question, as the issue at hand of keeping text to one side of the image would be indicative of a two column format.
I have yet to try that negative margin example, but see no reason why that functionality is so difficult to regcreate
Mar 6 '09 #15
David Laakso
397 Expert 256MB
That functionality is not difficult to create. And it was created within the thread.
Mar 6 '09 #16

Sign in to post your reply or Sign up for a free account.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
2
by: patrick h. | last post by:
Greetings, I am encountering some issues regarding using float while desiring to set the height to 100%. This is likely due to my own misunderstanding of the way things actually function -- any...
4
by: Matt | last post by:
Hi, Got an unordered list with 100% width, with 5 list items of 20% width styled to fill the width of the container element. Renders fine in Mozilla, but when you change the size of the window...
2
dlite922
by: dlite922 | last post by:
The frustrating thing with coding with divs instead of tables is trying to get them to "act" like they're inside each other. I have a container div, and three sub-divs. First contains a plus...
4
by: erikirl | last post by:
http://www.hardwareforfree.com/ I'm trying to get the Consumer Gift Network image to be in the top right corner of the 800px area in the header. I have searched for hours and tried a lot of...
2
by: Jim Carlock | last post by:
I ran into a problem a think. Either that or I overlooked something. I seem to run into this problem quite often. I fail to pinpoint the problem and it appears as a bug with mozilla browsers....
13
by: limelites | last post by:
In IE7, FF, Chrome and Safari, everything looks great but in Opera the display of the additional images in my product page looks awful. This is a site that does attract foreign visitors who do use...
1
by: Chinsu | last post by:
<html> <head> <style> #ex { width: 700px; background: red; float: left; } a, span { display: block;
3
by: Darren Laverick | last post by:
Hi I am trying to make dropdown menus for my website and am puzzled as to why my float left, in my container div, is not working (it is going underneath). Here is the code for both files. i hope...
2
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...
0
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge required to effectively administer and manage Oracle...
1
by: Matthew3360 | last post by:
Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. header("Location:".$urlback); Is this the right layout the...
0
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and...
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific technical details, Gmail likely implements measures...
0
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand. Background colors can be used to highlight important...
0
BLUEPANDA
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
0
by: Rahul1995seven | last post by:
Introduction: In the realm of programming languages, Python has emerged as a powerhouse. With its simplicity, versatility, and robustness, Python has gained popularity among beginners and experts...
0
by: Ricardo de Mila | last post by:
Dear people, good afternoon... I have a form in msAccess with lots of controls and a specific routine must be triggered if the mouse_down event happens in any control. Than I need to discover what...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.