Question

I have this piece of html code:

<div id="main" style=" margin:0 auto; ">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>

And I want the #main div to be align in the center of the page. How cand I do this? Thanks!

Answer 1

You must set a width for the div:

<div id="main" style="margin:0 auto; width:700px;">

I would also strongly suggest that you don’t use inline css. Add something like this in a external stylesheet instead:

#main {
   margin:0 auto;
   width:700px;
}
#main a {
   display:block;
}
#main > div {
   float:left;
}