Question

I’m building a landing page and I’ve got a container <div> and below that I have have a hero and it’s below this that I’m trying to align 2 divs next to each other. I can’t seem to get them to align and I’ve tried everything (float:left and float:right) and even margin but it doesn’t work. Annoying thing is I need it to work in IE6 too (lame I know) 🙁

CSS:

.container {
width:960px;
margin:0 auto;
position:relative;


}

#leftbox {
background-image:url(images/left-box.jpg);
float:left;
width:450px;
height:359px;
}

#rightbox {
background-image:url(images/right-box.jpg);
float:right;
width:450px;
height:359px;
}

And here’s the HTML:

<div class="container">
<img src="images/hero-main.jpg" alt="some text" usemap="#amap"/>
<map name="amap">
  <area shape="rect" coords="788,278,937,332" href="http://www.someurl.co.uk" alt="text"/>
</map>
<div id="boxes">
  <div id="leftbox"> </div>
  <div id="rightbox"> </div>
</div>
</div>

Any ideas please as I’m kinda stuck :S

Answer 1

For centering, just add margin to #boxes.

CSS:

#container {
    width:960px;
    margin:0 auto
}
#boxes {
    width:100%;
    margin:0 30px
}
#leftbox, #rightbox {
    width:450px;
    height:359px;
    float:left
}
#leftbox {
    background-image:url(images/left-box.jpg)
}
#rightbox {
    background-image:url(images/right-box.jpg)
}

HTML:

<div id="container">
    <p><img src="images/hero-main.jpg" alt="some text" usemap="#amap" /></p>
    <map name="amap">
        <area shape="rect" coords="788,278,937,332" href="http://www.someurl.co.uk" alt="text" />
    </map>
    <div id="boxes">
        <div id="leftbox"></div>
        <div id="rightbox"></div>
    </div>
</div>