On Firefox HTML input overflows on the right in a CSS grid

My CSS grid has the following stylesheet :

<span id="declaration" class="declaration" style="grid-template-columns: 80px 10px 150px; grid-template-rows: 10px 10px 20px;">
.declaration {
    display: grid;
    margin-top: 20px;
    grid-column-gap: 5px;
}

The leftmost element of the grid has the following stylesheet :

<input type="text" id="etiquette" class="etiquette" title="label" style="grid-column: 1 / auto; display: initial;">
.etiquette {
    grid-row: 1 / span 2;
    margin-left: 5px;
    margin-right: 10px;
}

Trying to Better Understand Grids

I am still new to CSS and have much to learn. I am trying to understand placement in a grid, with say, pictures and then content I want to sit to the left or right of said picture.

Let's say I have a 12 column grid I want to use for my page, each labeled accordingly starting from left to right from 1-12 respectively. So I have a picture I want to left align in column 3 that spans across through column 5. I then want to have column 6 blank and left align some paragraph text that will span columns 7-10. How do I do this?

CSS tabs and GRID

Is there anyway when I visit this page (http://www.renaudconsulting.net/properties.cfm) in IE8 & Firefox 3.6 that the grid can be expanded downward to include all rows. When I refresh the page it is all there. I have tried to see what css is controlling that in Firebug without any luck? IE7 is fine.

Image and text help - Display images next to text. (Layout Help )

urgent Help:

Hi I am trying to replicate the following image in HTML and CSS:

I ahve included my code so far. Could some please please help me and let me know If I'm going in the right direction or perhaps add the correct code so I can see what is happening and why.

help.jpg

MY HTML Code:

<body>
<div class="container">

Syndicate content