Home/ Questions/Q 4602594
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T00:00:37+00:00

I’m trying to accomplish something that I thought would be simple, but it seems

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0