Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 338
Joshua Avatar asked Jan 03 '13 22:01

Joshua


People also ask

How do I put two divisions side by side in HTML?

We can place content inside the <div> tag. Using CSS property, we can place two <div> tags side by side in HTML. By styling we can place the two division classes side by side.

How do I make divs appear side by side?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

How do I put two divs side by side horizontally?

To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.


1 Answers

<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.

like image 125
corymathews Avatar answered Sep 20 '22 23:09

corymathews