CODEWITHSUNDEEP
csshtml
user1901907
user1901907

Reputation: 33

Trying to get three divisions side by side

Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.

#wrapper {
    background-color: #788D9A;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

#mainleft {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;
    display:inline-block;
}

#maincenter {
    width: 60%;
    float: left;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    display:inline-block;


}

#mainright {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;

}

Upvotes: 0

Views: 85

Answers (3)

hunter
hunter

Reputation: 63512

You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.

Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.

If you want to have that inner padding and border style an inner div

Example: http://jsfiddle.net/b62Ju/2/

HTML

<div id="wrapper">    
    <div id="mainleft">
        <div>L</div>
    </div>
    <div id="maincenter">
        <div>C</div>
    </div>
    <div id="mainright">
        <div>R</div>
    </div>
</div>​

CSS

#wrapper {
    background-color: #788D9A;
}

#wrapper > div
{
    height: 1000px;
    float: left;
    text-align: center;
}

#mainleft {
    width: 20%;    
    background-color: #ABB8C0;
}

#maincenter {
    width: 60%;
}

#mainright {
    width: 20%;
    background-color: #ABB8C0;
}

#maincenter > div
{    
    height: 1000px;
    border-left: solid black;
    border-right: solid black;
}

#mainleft > div, 
#maincenter > div,
#mainright > div
{
    padding: 10px;
}

Alternatively you could use the box-model styles:

.box
{
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
}

more info: http://www.quirksmode.org/css/box.html

Upvotes: 2

cimmanon
cimmanon

Reputation: 68319

The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).

http://jsfiddle.net/b62Ju/3/

#wrapper {
    display: table;
    width: 100%;
}

#wrapper > div
{
    display: table-cell;
    padding: 1em;
}

#mainleft {
    width: 20%;    
    background-color: orange;
}

#maincenter {
    width: 60%;    
}

#mainright {
    width: 20%;
    background-color: green;
}

Upvotes: 1

Ravichandran Jothi
Ravichandran Jothi

Reputation: 3066

For your Reference if we need to place three dives side by side,

HTML:

<div class="main">
    <div class="left">...</div>
    <div class="center">...</div>
    <div class="right">...</div>
</div>

CSS:

.main {
    width: 1000px;
    float: left;
    display: inline-block;
}

.left {
    width : 20%;
    float: left;
    display: inline-block;
}

.right {
    width : 20%;
    float: left;
    display: inline-block;
}

.center {
    width : 60%;
    float: left;
    display: inline-block;
}

it will work.

I think in your code you need set width for main wrapper div.

Upvotes: 0

Related Questions