ansaurus

Question

Floating a div without specifying a width

Answer 1

A:

#text_container,
#image_container {
  display: inline;
}

should do it. Try this:

<html>
    <head>
    <style>
        #top {
            float: left;
            display: inline;
            border: 1px solid green;
        }

        #bottom {
            float: right;
            display: inline;
            border: 1px solid red;
        }
    </style>
    </head>
    <body>
    <div id="top">
        I'm the top div
    </div>
    <div id="bottom">
        I'm the bottom div
    </div>
</html>

But if the content of your div's is bigger than the width you've left for them (which it probably is) then you will struggle. You should really give it a width but the above might work for you depending on how you want to use it.

Pete Duncanson 2010-01-12 13:46:44

Thanks, this does work if the text is shorter than the width (which is not in my case) :(

L. De Leo 2010-01-12 14:07:40

Answer 2

A:

Instead of the text container use a paragraph tag (<p></p>). It will wrap around the content plus it is more accessible and semantic.

OD Ntuk 2010-01-12 15:34:24

If it's going to wrap an image, how is that semantic at all?

JoseMarmolejos 2010-02-14 22:24:47

I like to wrap code in native html tags. I limit divs to template level coding hence that is why I would use a paragraph tag.

OD Ntuk 2010-03-04 15:02:19

Answer 3

+1 A:

Try setting overflow: hidden on the wrapper div, that should automatically set the div to the width of the image.

OK maybe I misunderstood your question. Do you just want the text to flow around the image? If so, all you should need is this CSS:

#text_container { display: inline; }

DisgruntledGoat 2010-01-12 15:35:47

Like Colt .45...Works every time.

tahdhaze09 2010-01-12 15:37:28

I still need to set the width on the text_container

L. De Leo 2010-01-12 17:01:59

Answer 4

A:

http://www.alistapart.com/articles/practicalcss/

Later down the page is what looks like a solution to your issue.

tahdhaze09 2010-01-14 15:25:25

ansaurus

tags:

views:

answers:

Floating a div without specifying a width

related questions