Help - Search - Members - Calendar
Full Version: Floating image and div problem
Invision Power Services > Community Forums > Community Web Design and Coding
Phil Mossop
Have a look at this page in Opera or Firefox and you'll see that the table overlaps the picture on the right hand side, plus the image is positioned lower down than the top table row. Does anyone know a fix for this? It works great in IE.

One solution is to set the content div attribute overflow: auto; but this makes the div jump about 100px to the right in Firebox and scrollbars appear in the div in IE < 6.

CSS file: Click

Thanks!
.Kris
Actually for me the table's text overlaps not the table it self.

Meh i got to point these out
HTML
index.php?page=about&name=karl

and
HTML
index.php?page=about&equipment=karl


I know you know whats wrong with those.

And for your problem did you try setting padding to the image right side so it can like fit in?
_
To make it not overflow the bottom of the table, you need to have an element after it that does 'clear: both'.
Phil Mossop
QUOTE(Veracon @ Jul 13 2005, 07:15 PM) *
To make it not overflow the bottom of the table, you need to have an element after it that does 'clear: both'.


Clear both makes the table jump under the image, like this:

Click to view attachment

This is how I would like it to look (it works OK in IE, without the clear both element):

Click to view attachment

Thanks for your help. original.gif
Joshua Jones
-edited-

Sorry, just noticed you were using a table. Can you float the table right? Though that may make you lose your wrap.
Starnox
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <!-- Phil Mossop, phil@philmossop.com -->
    <!-- Creation date: 16th May 2005 -->

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="The Bluebirds are the ultimate, local blues band gigging regulary around the York area. The official Bluebirds band homepage contains gig information as well as pictures and band member profiles.">
<meta name="keywords" content="The Bluebirds, Bluebirds music, rock, blues, Karl Snowden, James Welburn, Kieran Ward, Tom Keeley, gigging, York">

<script type="text/javascript">
//<![CDATA[
    function NewWindow(mypage,myname,w,h,features)
    {
        var winl = (screen.width - w) / 2;
        var wint = (screen.height - h) / 2;

        if (winl < 0) winl = 0;
        if (wint < 0) wint = 0;

        var settings = 'height=' + h + ',';
        settings += 'width=' + w + ',';
        settings += 'top=' + wint + ',';
        settings += 'left=' + winl + ',';
        settings += features;

        win = window.open(mypage,myname,settings);
        win.window.focus();
    }
//]]>
</script>

<title>The Bluebirds - Karl's Profile</title>
<link href="global.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id='container'>

    <div id='nav'>
        <!--<div style='float: right;'><img src='gfx/small_logo.gif' width='40' height='34' alt='' /></div>-->

        <a href='index.php?page=home' title='Bluebirds homepage'>Home</a>&nbsp;&nbsp;
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />&nbsp;&nbsp;

        <a href='index.php?page=about' title='Bluebirds band profiles'>Band</a>&nbsp;&nbsp;
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />&nbsp;&nbsp;

        <a href='index.php?page=sound' title='Bluebirds discography'>Discography</a>&nbsp;&nbsp;
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />&nbsp;&nbsp;

        <a href='index.php?page=gigs' title='Bluebirds gig list and info'>Gigs</a>&nbsp;&nbsp;
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />&nbsp;&nbsp;

        <a href='index.php?page=pictures' title='Bluebirds pictures'>Pictures</a>&nbsp;&nbsp;
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />&nbsp;&nbsp;

        <a href='index.php?page=contact' title='Contact The Bluebirds'>Contact</a>&nbsp;&nbsp;
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />&nbsp;&nbsp;

        <a href='index.php?page=forum' title='Bluebirds forum'>Forum</a>
    </div>

   <div class='sidebar'>
        <div class='sidebartitle'>Gig Guide (5/7)</div>
        <div class='starlinks'>
            <ul><li><a href='index.php?page=gigs'>20th July</a></li><li><a href='index.php?page=gigs'>23rd July</a></li><li><a href='index.php?page=gigs'>11th August</a></li><li><a href='index.php?page=gigs'>18th August</a></li><li><a href='index.php?page=gigs'>31st August</a></li><li><a href='index.php?page=gigs'><em>Full listing</em></a></li></ul>
        </div>
    </div>

   <div class='sidebar'>
        <div class='sidebartitle'>Bluebirds Extras</div>
        <div class='starlinks'>
            <ul>
                <li><a href='index.php?page=wallpaper' title='Get Bluebirds Wallpaper'>Wallpaper</a></li>
                 <!--<li><a href='index.php?page=merchandise'>Purchase merchandise</a></li>-->
            </ul>
        </div>
    </div>


   <div class='sidebar'>
        <div class='sidebartitle'>Random Lyric</div>
        <div class='sidebarbody'>
            <span class='bigquote'>"</span><em>Hey, my baby don’t love me no more</em><span class='bigquote'>"</span><br /><br />
            <p class='randomsong'>- Red House</p>
        </div>
    </div>

    <div id='breadcrumb'>
        <p><a href='index.php?page=home'>Home</a> / <a href='index.php?page=about'>About</a> / <a href='index.php?page=about&name=karl'>Karl</a></p>
    </div>

    <div id='content'>
    <h1>Karl's Profile</h1>
            <a href='index.php?page=about&equipment=karl'>View Karl's Equipment</a>
                <p>
                                <table cellpadding='0' cellspacing='0' border='0' class='generictable' align='center'>
                <tr>
                    <td><strong>Bluebird No.</strong></td>
                    <td>2</td>
                    <td rowspan="10" valign="top"><img src='gfx/profile/karl.jpg' width='150' height='421' alt='The Bluebirds - Karl Snowden' /></td>
                </tr>
                <tr>
                    <td><strong>Name</strong></td>
                    <td>Karl Snowden</td>
                </tr>
                <tr>
                    <td><strong>Age</strong></td>
                    <td>17</td>
                </tr>
                <tr>
                    <td><strong>Band Role</strong></td>
                    <td>Vocalist and Rhythm Guitarist</td>
                </tr>
                <tr>
                    <td><strong>Influences</strong></td>
                    <td>The Jimi Hendrix Experience, The Eagles, SRV and Double Trouble, David Bowie, Dire Straits, Lynyrd Skynyrd, Derek and the Dominoes, Ash, Stereophonics, The Hamsters, ZZ Top, The Beatles</td>
                </tr>
                <tr>
                    <td><strong>Started Playing Guitar</strong></td>
                    <td>Have been playing guitar and bass for about 2 ? years</td>
                </tr>
                <tr>
                    <td><strong>Instrument Specific Influences</strong></td>
                    <td>Jimi Hendrix, Robben Ford, SRV, Robert Johnson, Joe Walsh, Brian May, Eric Clapton, Slim</td>
                </tr>
                <tr>
                    <td><strong>Favourite Bluebirds Song</strong></td>
                    <td>Jimi</td>
                </tr>
                <tr>
                    <td><strong>Favourite Cover Song</strong></td>
                    <td>Red House, by Hendrix of course :)</td>
                </tr>
                <tr>
                    <td><strong>Favourite Gig</strong></td>
                    <td>The most recent one [22nd June 05] at the Basement Bar was pretty damn good</td>
                </tr>
            </table>

            <br />
            <strong>Other Comments</strong><br /><br />
            If you can find two photos where my hair is the same colour, I'll give you 50% off our next gig! <span style='font-size: 8pt;font-style: italic;'>(This comment is clearly only of comical value, and therefore no discounts will be made regarding entry to any Bluebirds gigs)</span>
        </p>
    </div>

    <p id='copyright'>All content and audio copyright &copy; Bluebirds 2004 - 2005</p>

</div>

</body>
</html>


Is one way of doing it.
Joshua Jones
Yeah I guess if you are going to have a table anyway might as well use it.

Good Idea.
Phil Mossop
Thanks Starnox!! biggrin.gif kiss.gif
Starnox
QUOTE(Phil Mossop @ Jul 13 2005, 09:12 PM) *
Thanks Starnox!! biggrin.gif kiss.gif


Glad I could help original.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.