Category Archives: CSS & HTML

Div float problem in Firefox – Background content not automatically resizing

Posted on by
Reply

I’ve had this problem several times and each time it catches me out so this time I’m blogging about it so I don’t forget myself. Sometimes designers need to arrange divs into columns whilst allowing the page to grow vertically based on content in these columns.

A problem can happen in Firefox when divs are floated left and right, which is not an error in rendering it must be said but a problem that comes from an expected behaviour.

Sometimes when you float divs the containing element does not automatically resize with the expanding inner divs. This is because the divs are outside the normal flow of the document and the browser tries to float text around these divs.

To fix it is simple however,

Basically what I do is create an outer div called container. Within this container I place the two floating divs and finally I place a div at the bottom of these to clear the floats.

Here’s the code, hope it helps someone out there:

<div style="width: 800px" >
<div style="float: left; width: 480px; margin-right: 40px">Left Content</div>
<div style="float: right; width: 280px">Right Content</div>
<div style="clear:both">&nbsp;</div>
</div>

Make Submit Button an Image (HTML FORM)

Posted on by
Reply

Often you might want to replace the standard sumbit button on a html form with an image.

This is a very simple thing to do.

Instead of:

<input name="submit" type="submit" value="submit" />

insert:

<input alt="Search Button" src="image.jpg" type="image" />

Here is an example of such a form:

<form method="POST">
<input name="searchtext" type="text" />
<input alt="Search Button" src="search.jpg" type="image" />
</form>

Centering a Website – Cross Browser

Posted on by
1

Most sites these days are centred and have a fixed with be it 800, 1024 pixels wide or whatever.  If any of you have used divs and css and tried using standard centering you might have, at one stage or another, scratched your head while viewing it on different browsers.

Let’s say we want a webpage with a width of a nice round 1000 pixels. To do this we might create a new div within the body tag called page:

<body>
<div class="page">Content goes here<br/><br/><br/><br/><br/></div>
</body>

In order to centre this on IE7 and less we simply set the width in the div and in the body tag set text-align to center i.e.

body
{
 text-align: center;
}
.page
{
 width: 1000px;
 text-align: center; /*don't forget to reset alignment for child elements*/

}

On IE8+, Firefox and other browsers this is not correct behaviour however and they will left align the inner div, therefore we need to centre the inner div using the margin tag by setting it to margin: 0 auto e.g.

body
{
 text-align: center;

}
.page
{
 margin: 0 auto;
 text-align: left;
 width: 1000px;
 background-color:red;

}

By specifiying margin: 0 auto and by setting the div’s width, the browser can calculate how much distance to place between the left side of the div and the left margin of the browser window.

So there you have it, simple and effective and cross browser compatible.