Geek Answers Handbook

How to place three div elements side by side on a web page

Hello to all Iam trying to create a website with a "container div" and inside this div are three main columns: "div left", "div middle" and "div right".

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

Note. The middle div (holding table) fills 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>
+7
source share
3 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 swimming, they all line up next to each other.

+14
source

Here are a few things going on.

<div> is a block level element. This means that by default you will get a new line after each of them. (CSS will be display: block ).

You can force them not to make newlines, but keeping their distance characteristic by doing:

 display: inline-block

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

You were right to try float them, but due to the way the CSS Box Model works, any margin or border attribute will cause them to be larger than the percentages you specify. (Edit: skipped this float: center - this does not exist. This is right or left for float .)

You can try to specify a width that is less than 100% if you want to keep swimming.

+5
source

If you don’t need IE7 support, you don’t need to swim 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

+2
source

More articles:


All Articles