div inside div basic help please, how to wrap text around a div in a div Options

[sjjs1985]

hi all. im new here so this could be pretty easy for you guys.

Basically this is what i want:


A main div with the content.
2 divs inside, one bottom left, one bottom right.
the text inside the main div to wrap around the smaller divs.

all help greatly appreciated.
thank you,
sam

[pandy]

It's anything but easy. What's in those small DIVs? Do they have a known width and height?

[sjjs1985]

well the content of the divs change throughout the page. does the width and height make a difference? the main div is 900 x 300 and the small divs are 80x30.

thanks

[sjjs1985]

hmmm, im gonna try n add a blank image behind the divs, then i can wrap the text around the images right?

[pandy]

No, that won't help. I thought a known width and height might, but it seems like I was wrong. Is the big DIV really fixed height, considering it contains text?

[sjjs1985]

yes because there are more buttons below the main div so the text will scroll if it fills more than the div.
who invented this stuff! drivin me mad!

this is what i have in the small divs:

(HTML)

<div id="button">
<a id="button" href="button.html" title="button"></a>
</div>

(CSS)

#button { display: block; width: 200px; height: 72px; background: url("images/button.png") no-repeat 0 0; }

#button:hover { background: url("images/buttonrollover.png") no-repeat 0 0; }

Am i doing it all wrong?? can i align the "<a></a>" tags without putting them in a div??

[pandy]

Yes, you can, you don't need a DIV for that. There may be other reasons for using DIV or another block level element depending on how the rest of the HTML looks.


The problem with what you want to do with the small boxes with text flowing around them is that there is no property that makes boxes "float to the bottom". There are ways, but as I interpret your image you want the small boxes at the absolute bottom and the main text should be in one chunk. I don't think it can be done.

[pandy]

I meant that I don't think it can be done exactly like that. If you can settle for the little boxes floating somewhere close to the bottom it's no problem, but it would involve inserting those DIVs in the text with just a few lines of text after them. Not so nice, maybe.

CODE

text text text text text...
text text text text text...
text text text text text...
text text text text text...
text text text text text...
text text text text text...
text text text text text...
text text text text text...
<div style="float: left"></div>
<div style="float: right"></div>
text text text text text...
text text text text text...

[sjjs1985]

yeah not really what i wanted. if i just put the divs inside the main div i get the same almsot. but the divs scroll with the text when there is an overflow.
thanks for the help. suppose i will just change the design a bit
t

[pandy]

Oh, they should stay put when the text scrolls? That AND having the text flow around them I'm pretty sure is impossible.

If you can live without the text flowing, it's pretty easy to place the buttons where you want though. Here's one way. See if this could work for you. Since the buttons are so small and the text can be scrolled, I don't think it's that horrible that they cover the text.

CODE

#text    { width: 900px; height: 300px;
           overflow: auto }
#left    { position: relative; top: -30px;
           width: 80px; height: 30px;
           background: yellow }
#right   { position: relative; top: -60px; left: 820px;
           width: 80px; height: 30px;
           background: yellow }

HTML

<div id="text">
LOTS OF TEXT....
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>

[Christian J]

Here's a pretty fragile solution using positioning instead of floats. I wouldn't dare using it myself.

CODE

.wrap {
position: relative;
width: 300px;
height: 300px;
border: solid green;
}

.c {
width: 100%;
height: 100%;
overflow: auto;
background: pink;
}

.l, .r {
position: absolute;
bottom: 0;
width: 80px;
height: 40px;
background: lime;
}

.l {left: 0;}
.r {right: 17px;} /* I'm guessing most browsers' scrollbar is this wide. */
.spacer {height: 50px;} /* At least the height of the little boxes. */

CODE

<div class="wrap">
    <div class="c">
    Lorem ipsum...
    <div class="spacer">&nbsp;</div>
    </div>
    <div class="l">Left</div>
    <div class="r">Right</div>
</div>

[pandy]

This is a fun thing I haven't noticed before. You can put the buttons outside the text div in a wrapper with the same width as the text div, float them left and right and move them up with a negative top margin. Well, that's not so fun, but when you do that standard compliant browsers give them a translucent background, or at least Opera and FF do. It doesn't work in IE, so I didn't think it was worth the hassle. Question is, why do they do that and why just under these circumstances?

[pandy]

Here, so you don't have to write it up (note it doesn't work at all in IE). Have you noticed this before?

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--
#text          { width: 250px; height: 100px; overflow: auto }
#wrapper       { width: 250px }
#left, #right  { width: 50px; height: 50px;
                 margin-top: -50px;
                 background: #69caff }
#left          { float: left }
#right         { float: right }
-->
</style>

</head>


<body>

<div id="text">
This is a fun thing I haven't noticed before. You can put the buttons outside the text div in a wrapper with the same width as the text div, float them left and right and move them up with a negative top margin. Well, that's not so fun, but when you do that standard compliant browsers give them a translucent background, or at least Opera and FF do. It doesn't work in IE, so I didn't think it was worth the hassle. Question is, why do they do that and why just under these circumstances? <img src="http://forums.htmlhelp.com/style_emoticons/default/unsure.gif" width="20" height="20" alt="unsure">
</div>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>

</body>
</html>

[pandy]

OK, now it's spooky. I added a background color to #text to see if FF/O would mix the colors. The small divs totally disappeared in FF, their text and all.

[Christian J]

Maybe the floated boxes appear behind #text (but still in front of the scrollbar)? That would explain the apparent transparency. Then when you give #text a background it obscures the floated boxes.

[pandy]

They don't disappear in Opera, only in FF.

[Christian J]

I tried using just -30px margin-top, then you can see part of them sticking out. BTW it's only Opera that lets them obscure the scrollbar, in Safari and Gecko they are located behind it. I'd say Opera has a bug and the others make sense.

[pandy]

Bah.

[sjjs1985]

thanks for the help. i'm not experienced enough to understand why they're dissapearing?!?!
i will just have to live with them on top of the text. as you say, its not really an issue as the text scrolls, but it just looks a tad naff.
its all a learning curve for me!
thanks again

[Frederiek]

Take a look here: http://www.csstextwrap.com/examples.php