CODEWITHSUNDEEP
htmlcsshtml-table
Melanie
Melanie

Reputation: 1208

Table beside a floating image

I'm trying to accomplish something that I thought would be simple, but it seems that when it comes to CSS, you never know!

I have an image float to the left. Beside it, I have a title and under that title, but still besides the image, I want to display a table taking all the remaining width. In IE and Chrome, the table ends up under my image while in Firefox, it takes more that 100% (an horizontal scroll bar is displayed). Firefox gives a result closer to what I want, but I don't want the scrollbar.

Here some code that I tried to make work using w3school "try it" editor (http://www.w3schools.com/css/tryit.asp?filename=trycss_float)

<html>
    <head>
        <style type="text/css">
            h1{
                font-size:1em;
            }
            img 
            {
                float:left;
            }
            .field{
                width:100%
            }    
        </style>
    </head>

    <body>
        <img src="logocss.gif" width="95" height="84" />
        <div class="content">
            <h1>this is the title</h1>
            <form>
                <table width="100%">
                    <tr>
                        <td><input type="text" class="field"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>    
</html>

I know the structure is too complex for that simple form, but forms are automatically generated by a PHP script so I'd like to keep it that way.

Upvotes: 1

Views: 4372

Answers (4)

enamrik
enamrik

Reputation: 2312

I think you have to float your table along with your image and remove the width:100% on your table. 

<div id="content">
    <div id="side_bar" style="float:left;">image</div>
    <div id="main_content" style="float:left;">table</div>
    <div style="clear:left;"></div>
</div>

or the old way

<table>
    <tr>
        <td>image</td>
        <td>table</td>
    </tr>
</table>

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

The .content div is 100% of the page wide including the bit under the floated image so the input set at 100% is also going to be that wide, to make the .content div take up only the space that's left after the floating image you can add overflow: hidden to it, but then the input itself can use varying box models, so I would suggest using a width of 99% on it. If the content is not actually an input then maybe 100% will work for most elements ;)

e.g. x-browser-code

h1 {font-size:1em;}

table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}

.content {overflow: hidden;}
form {padding: 0; margin: 0;}

img {float:left;}

.field {
    width:99%;
    margin: 0 auto;
}

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38503

Because you have a floated image taking horizontal space from the .content div is why you get the extended table. The .content div is not aware of the floated image width. You can offset this by placing a margin at least the width of the image on the .content div.

.content 
{
    margin-left: 95px; 
}

fiddle

Upvotes: 2

mu is too short
mu is too short

Reputation: 434665

Try setting your <table> to display: block in the CSS and dropping the width="100%" attribute:

table {
    display: block;
}

http://jsfiddle.net/ambiguous/dyxw7/

The above example includes a red border on the table so that you can see where it is, I also changed the image to a kitten to make sure it would show up.

Upvotes: 0

Related Questions