Forum Moderators: not2easy

Message Too Old, No Replies

Float issues

Using float breaks the divs

         

madmatt69

10:37 pm on May 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey everyone,

I have kind of a complicated layout but this should be a simple thing. Why it's not working, I don't know.

Basically I have a div called "txt".

Inside that div is where I place my text. I want to put an adsense rectangle in there, and then have the text 'float' to the right of the adsense block.

So basically, if you're looking with a high enough resolution, you see the adsense block and right beside it is the text. When you shrink the window, or look at a res of 800x600 you see the adsense block and underneath it is the text. So it's collapsable.

However when I try to make the text a seperate div using <div style="float:right;"> the text appears underneath the containing div (which is the div labelled txt).

Does anyone know a solution to this problem? Basically i want text under my adsense block on a small resolution, and on a larger resolution i want the text to come up so that it's on the right of the adsense block (to flesh out the page).

Any help is appreciated!

httpwebwitch

2:58 am on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



if I understand you,
it sounds more like you need to float the adsense left within the text div.

then the text will wrap around and beneath the ads

<div id="txt">
<div align="left">Adsense here</div>
Lorem ipsum...
</div

madmatt69

5:44 am on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for the reply. I also want the text to appear to the right of the adsense block if the resolution permits - or, go under it if the resolution is too small.

Know what I mean?

httpwebwitch

1:45 pm on Jun 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I know what you mean... you want a minimum width for the content so you don't end up with a sliver of text wrapping around the right before popping out below.

you don't want this:

[ ]-
[ ]-
[ ]-
----

you want either this:
[ ] ---
[ ] ---
[ ] ---

or this

[ ]
[ ]
[ ]
---
---
---

float the ads left, set an absolute width. show your text also with an absolute width. Put it all in a <div> with display:block and a percentage width, which resizes with the window.

If the text fits beside the ads, it will squish in there. Otherwise it'll get pushed down below. I'm sure it'll take a lot of tweaking and experimenting to get it right