CODEWITHSUNDEEP
htmlcss
Tigran
Tigran

Reputation: 1057

3 div that do not fit 1 line

I want to split a row into 3 parts: 20%,60% and 20%. But for some reason, total width is more than 100% and last element is diplayes on new line. What is the problem? I add margin 0 and padding 0 to all three. And 20% + 60% + 20% = 100%

CSS:

#text_area_row
    {
        position:relative;
        font-size:80px;
        width:auto;
        cursor:default;
        top:10%;
        margin: 0;
        padding:0;
    }
    #text_area_center
    {
        text-align:center;
        display:inline-block;
        margin:0;
        padding:0;
        width:60%;
        overflow:hidden;
    }
    #center_div
    {
        margin:0 auto;
    }
    #text_area_left
    {
        text-align:left;
        position:relative;
        display:inline-block;
        opacity:0.5;
        filter: alpha(opacity=50);
        width:20%;
        margin:0;
        padding:0;
        overflow:hidden;
    }
    #text_area_right
    {
        position:relative;
        text-align:right;
        display:inline-block;
        opacity:0.5;
        filter: alpha(opacity=50);
        width:20%;
        margin:0;
        padding:0;
        overflow:hidden;
    }

HTML:

<div id='text_area_row'>
                <div id='text_area_left'>
                        <div class="card_style"></div>
                </div>
                <div id='text_area_center'>
                    <div id='center_div'>
                        <div class="card_style"></div>
                    </div>
                </div>
                <div id='text_area_right'>
                        <div class="card_style"></div>
                </div>


            </div>

Upvotes: 0

Views: 86

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196092

The issue is whitespace, since you have made your div elements display:inline-block

You could compact your html by removing whitespace between those div tags..

<div id='text_area_left'>
    <div class="card_style"></div>
</div><div id='text_area_center'>
        <div id='center_div'>
            <div class="card_style"></div>
        </div>
</div><div id='text_area_right'>
        <div class="card_style"></div>
</div>

Another trick (if you want to maintain the code formatting) is to comment out the white space

<div id='text_area_left'>
        <div class="card_style">1</div>
</div><!--
--><div id='text_area_center'>
    <div id='center_div'>
        2
    </div>
</div><!--
--><div id='text_area_right'>
        <div class="card_style">3</div>
</div>

Demo at http://jsfiddle.net/xYdWq/

Upvotes: 3

saman khademi
saman khademi

Reputation: 842

use float:left for divs text_area_left,text_area_center,text_area_center
here your demo http://jsfiddle.net/N6fwu/

Upvotes: 0

Related Questions