Best way to add a new box to a page?

Let’s say a client wants a new box added to his website with two columns, one with contact information and the other with a small google map. My approach is to just take a div and inside that div two seperate divs and then do the CSS.

For the above approach my HTML code would be:

<div id="newbox">
    <div id="contactinfo">
    <div id="googlemap">
        <!--GOOGLE MAP CODE HERE-->

The CSS code would be:

#newbox {
    width: 500px;

#contactinfo {
    float: left;
    width: 60%;

#googlemap {
    float: left;
    width: 40%;

What are your opinions?:slight_smile:

That’s a fair enough approach, although it might be better not to let the combined widths of the inner divs add up to 100%, as that could cause some browser problems. Might be better to set them at something like 58% and 38% and float one of them right. Then you have a gap between them (which you will probably want anyway, and no worries about the widths exceeding 100% (because of pixel rounding etc.).

If the #newbox div is to have a background on it, you’ll also want to give it something like overflow: hidden to force it to enclose its floated content.

I don’t like this in your HTML, though:


You’d be better off with something like


Think of spans as a hook for styling sections of a block level element like <p>s, <h1>s etc.

When we had a google map live on our page (I’m assuming this will be a Live one), we stopped doing % widths. The thing really did want the container box to be square.

If the %'s as suggested by Ralph don’t work out right once you haz the googley maps in there, try


and float the googlymap right and use a set width in px
and let contact just full up the rest of the room.

But don’t bother all this if the %'s work ok with the live googlemap… it probably is nicer to have the contact info first in source.