viewing at varying resolutions/screen sizes.

[vivapotenza]

Hello everyone.

Im hoping somebody will be able to offer some guidance on a small issue im having trying to setup a "welcome" message on my CMPS system.

The way i have set it up is using html coding to create two tables, one containing an image, and another table to the right of it containing text.

This appears correct to me, and a lot of other people. however when i log on on my mobile, or set my screen resolution lower than at present, it messes with the formatting and causes the image to run into the text. like so:



The full version can be seen here:

http://www.vivapotenza.com/index.php

And this is the code I have used to create it the way I have:

<div style="float: left; width: 5%;">
<img  style="width: 100px; height: 100px; text-align: left;" alt="" src="/images/tp.jpg" align="left"></div>


<div style="float: right; width: 87%;">
Welcome to Viva Potenza! The web's newest motoring forum. We are a non brand specific, non model specific, non power specific site. In other words we don't care what you drive or ride, we don't care what it looks like or how fast it goes. What we do care about is making a 'safe haven' for petrolheads across the globe to talk cars, bikes, trucks or anything else, and not feel like they have to prove themselves in the horsepower stakes. We'd love it if you registered and shared your experiences with us, it's totally free! We have everything from mega restorations to slight modifications, and the odd terrible joke in between. <p></p><p>We look forward to chatting with you. </p><p>Regards,<br><br>Team Potenza
</p></div>

The reason for the 87% width on the right is to space out the text enough from the image, so i suspect this is the problem, or it could be coded differently to resolve this problem, but i am a relative noob to all this and so its the best i could do

Hopeully one of you fellas who is more clued up on css and html can offer a simpler way to do it that will wrap the text correctly, whilst still offering a slight gap between image on left, and text on right, no matter what the screen size is.

Thanks in advance.

Mick
Vivapotenza.

[vivapotenza]

its ok, found an answer to this eventually, made it in the VBa software rather than in HTML and it now wraps the text properly

[Dragonsys]

the problem is with the floating divs, you need to use a wrapper.

<div id="container">
<div style="float: left; width: 5%;">
<img  style="width: 100px; height: 100px; text-align: left;" alt="" src="/images/tp.jpg" align="left"></div>


<div style="float: right; width: 87%;">
Welcome to Viva Potenza! The web's newest motoring forum. We are a non brand specific, non model specific, non power specific site. In other words we don't care what you drive or ride, we don't care what it looks like or how fast it goes. What we do care about is making a 'safe haven' for petrolheads across the globe to talk cars, bikes, trucks or anything else, and not feel like they have to prove themselves in the horsepower stakes. We'd love it if you registered and shared your experiences with us, it's totally free! We have everything from mega restorations to slight modifications, and the odd terrible joke in between. <p></p><p>We look forward to chatting with you. </p><p>Regards,<br><br>Team Potenza
</p></div>
<!-- Clear floats -->
<div style="clear: both;"></div>
<!-- Close container -->
</div>