Search code examples
csshtmlalignment

How to align multiple divs in another?


So here's my HTML:

...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>

<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]

The only CSS I have is:

* {
margin: 0px;
}
img.logo {
display: block;   margin-left: auto;   margin-right: auto; 
}

I really need help to align the three divs on the whole page. Also div.center must have the same size as the image, aka width - 800px and height - 600px.


Solution

  • It looks much more like a table than divisions to me...

    <table class="header"><tr>
        <td class="left"></td>
        <td class="center">
            <img class="logo" src="linktomyimage.com/image.png" />
        </td>
        <td class="right"></td>
    </tr></table>
    

    Think about so CSS afterwards :

    table.header{
        width: 100%;
        border-collapse: collapse;
    }
    
    table.header td{
        vertical-align: top;
        border: 1px solid #404040;
    }
    
    table.header td.center{
        width: 800px;
        height: 600px;
    }
    

    This is just a code sample, get the idea, and adapt to your own needs ^^