CODEWITHSUNDEEP
htmlcss
Costas Vrahimis
Costas Vrahimis

Reputation: 539

How to align 3 divs inside 1?

I want the borders of my divs to look like this

                        outer div #info
 ------------------------------------------------------------
 | |-----------------||-----------------||-----------------||
 | |                 ||                 ||                 ||
 | |                 ||                 ||                 ||
 | |                 ||                 ||                 ||
 | |      1 inner    ||      2 inner    ||     3 inner     ||
 | |        div      ||        div      ||       div       ||
 | |                 ||                 ||                 ||
 | |  #leftpannel    ||  #centerpannel  ||  #rightpannel   ||
 | |                 ||                 ||                 ||
 | |                 ||                 ||                 ||
 | |-----------------||-----------------||-----------------||
 |----------------------------------------------------------|

but when I put it in a browser it looks like 

 ------------------------------------------------------------
 |                    |-----------------||-----------------||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |      2 inner    ||    3 inner      ||
 |                    |        div      ||      div        ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |-----------------||-----------------||
 ||------------------|--------------------------------------|
  |                  |                   
  |                  |
  |                  |
  |                  |
  |      1 inner     |
  |        div       |
  |                  |
  |                  |
  |                  |
  |                  |
  |------------------|

this is my css

#rightpannel
{
   width:32%;
   float:right;
   height:390px;
   border: solid;
   border-width:1px;
   border-color:green;
}
#centerpannel
{
    width:32%;
    display:inline;
    margin-left:auto;
    margin-right:auto;
    height:390px;
    border: solid;
    border-width:1px;
    border-color:green;
}
#leftpannel
{
    width:32%;
    float:left;
    height:390px;
    border: solid;
    border-width:1px;
    border-color:green;
}
#info
{
    width:92%;
    height:400px;
    border: solid;
    border-width:1px;
    border-color:red;
    margin:0 auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 0px;    
}

and this is my html

<div id="info">     
    <div id="rightpannel"></div>        
    <div id="centerpannel"></div>       
    <div id="leftpannel"></div> 
</div>

I really do not know why this is happening and I appreciate any help thanks in advance

Upvotes: 2

Views: 597

Answers (3)

apaul
apaul

Reputation: 16170

You can simplify things a bit and use one class rather than 3 IDs, but it looks like in order to get the 3 column layout to be "unbreakable" and re-sizable you may need to use a little JavaScript...

Working Example

HTML

<div id="info">
    <div class="pannel"></div>
    <div class="pannel"></div>
    <div class="pannel"></div>
</div>

CSS

.pannel {
    display:inline-block;
    float:left;
    height:390px;
    border: solid;
    border-width:1px;
    border-color:green;
    margin: 2px;
}
#info {
    width:90%;
    height:400px;
    border: solid;
    border-width:1px;
    border-color:red;
    margin:0 auto;
    padding:5px 2px 0 2px;
}

JS

var pannel = function(){
    var x = $('#info').width() / 3 - 6.3;
$('.pannel').width(x);
};

$(document).ready(pannel);
$(window).resize(pannel);

Upvotes: 1

Thanos
Thanos

Reputation: 3059

Try this 

#rightpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin-left:1%;
}
#centerpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin-left:1%;
}
#leftpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
}
#info {
width:100%;
height:400px;
border: solid;
border-width:1px;
border-color:red;
margin:0 auto;
padding: 5px 5px 5px 0;
}

Example

You still need to change the margins-padding a bit.

Upvotes: 2

null
null

Reputation: 3517

The width of the main div is not great enough to contain the other 3. Padding, margins and borders all need to be accounted for. Set up a fiddle and test but ultimately you'll need to play with the figures to get the desired result.

Also worth lookin up the box model to get a clearer understanding

Never use tables to align divs. that amateur and ugly! Tables are used for tabular data. End.

Upvotes: 3

Related Questions