Best way to add a new box to a page?

Get Started
1

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">
        <span>Phone:</span>
        <span>017829389348</span>
    </div>
    <div id="googlemap">
        <!--GOOGLE MAP CODE HERE-->
    </div>
</div>

The CSS code would be:


#newbox {
    width: 500px;
}

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

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

What are your opinions?:slight_smile:

2

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:

<span>Phone:</span>
<span>017829389348</span>

You’d be better off with something like

<p>Phone:<br>
017829389348</p>

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

3

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

<thecontainerdiv>
<googley/>
<contactinfo/>
</thecontainerdiv>

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.