CODEWITHSUNDEEP
htmlcsscss-float
Joshua
Joshua

Reputation: 371

How to position three div elements side by side across a webpage

Hi all Iam trying to build a website that has a 'div container' and within this div three main columns, 'div left', 'div middle' and 'div right'.

I have tried to set the width for each column to 25%, 50%, and 25% respectively - also floated all divs left - with two images either side of the table (div middle). Unfortunately the three divs are on separate lines instead of side by side. Has anyone got any tips or advice for this? Any help would be appreciated.

Note: The middle div (holding the table) is populated as events are added.

<div id = "container" style = "width:100%">

<div id ="left" style = "float: left; width: 25%;">
    <?php echo $this->Html->image('/img/sideart.jpg'); ?>
</div>

    <div id = "middle" style = "float: center; width: 50%; height: 100%;">
    <table cellpadding="0" cellspacing="0">
    <tr>

    </tr>

    <?php
    foreach ($events as $event): ?>

    <tr>
        <td class="actions">

        </td>
    </tr>
<?php endforeach; ?>
    </table>
    </div>

    <div id = "right" style = "float:right; width: 25%;">
        <?php echo $this->Html->image('/img/sideart2.jpg'); ?>
    </div>
</div>

Upvotes: 8

Views: 53728

Answers (3)

robertc
robertc

Reputation: 75707

Unless you need to support IE7 you don't need to float anything. Given this markup:

<div id="container">
    <div>
        First Div
    </div>
    <div>
        Middle Div
    </div>
    <div>
        Last Div
    </div>
</div>

This CSS will give you three columns 25%/50%/25%:

#container {
    display: table;
    width: 100%;
}
#container > div {
    display: table-cell;
    width: 25%;
}
#container > div:nth-child(2) {
    width: 50%;
}

Demo.

Upvotes: 2

tkone
tkone

Reputation: 22728

A couple of things are going on here.

<div> is a block-level element. This means, by default you will get a newline after each one. (The CSS would be display: block).

You can make them not do newlines, but retain their spacing characteristic by doing:

display: inline-block

This will make them display inline, but allow for vertical spacing as if they were block level elements.

You were right to try to float them but due to how the CSS Box Model works, any margin or border attribute will cause them to be larger than the percentages you've specified. (Edit: missed that float: center -- that doesn't exist. It's right or left for float.)

You might try to specify widths that total less than 100% as well if you want to continue to float them.

Upvotes: 6

corymathews
corymathews

Reputation: 12619

<div id = "container" style = "width:100%">
    <div id ="left" style = "float:left; width: 25%;">
        <?php echo $this->Html->image('/img/sideart.jpg'); ?>
    </div>
    <div id = "middle" style = "float:left; width: 50%;">

    </div>
    <div id = "right" style = "float:left; width: 25%;">

    </div>
</div>

There is no such thing as float:center. By floating them all left they will line up next to each other.

Upvotes: 18

Related Questions