CODEWITHSUNDEEP
htmlcss
Lance Shi
Lance Shi

Reputation: 1187

How to prevent divs break into two lines?

I am using divs to work line a table. And here is the head of the table: 

<div id="table-header">
                <div id="header-row">
                    <div class="rate-rule-column s-boarder">
                        <div class="header-text ">Rate Rule</div>
                    </div>
                    <div class="rate-column s-boarder">
                        <div class="header-text">Rate</div>
                    </div>
                    <div class="qty-column s-boarder">
                        <div class="header-text">Qty</div>
                    </div>
                    <div class="copies-column s-boarder">
                        <div class="header-text">Copies</div>
                    </div>
                    <div class="amount-column s-boarder">
                        <div class="header-text">Amount</div>
                    </div>
                </div>
            </div>

The current code is using float: left to position those elements. The issue with this is: although it works fine when the zoom is 100%, the table line will break into two lines when zoom in / zoom out.

It's not breaking into two lines within one single cell. So whitespace: nowrap doesn't help in this case. Is there a way to prevent breaking into lines between the divs?

Edit:

Add css code as requested. But the only interesting part to me is float: left. 

.amount-column{
    width: 130px;
    height: 30px;
    float: right;
}

.copies-column{
    width: 69px;
    height: 30px;
    float: left;
}

.qty-column{
    width: 150px;
    height: 30px;
    float: left;
}

.rate-column{
    width: 150px;
    height: 30px;
    float: left;
}

.rate-rule-column{
    width: 300px;
    height: 30px;
    float: left;
}

Upvotes: 0

Views: 2862

Answers (3)

Lazertrax
Lazertrax

Reputation: 66

The reason your divs break into two lines is that the container div "header-row" doesn't have a fixed width. it takes the full width of the view-port and if the elements inside have widths greater than the view port the div will automatically wrap into a new line. to fix this you have to sum the widths of all the floating divs and set that as the width of the container row div.

#header-row{width:  800px; overflow: hidden;}

this should keep the divs on the same line withing the container div. (since you are using fixed widths for the columns i'm assuming you don't need them to be responsive)

Demo: http://jsfiddle.net/1z3secLz/

Hope that helps.

Upvotes: 1

ThatTechGuy
ThatTechGuy

Reputation: 889

Using percentage based widths will allow for responsiveness, I would text-align in that situation though as shown below. Additionally, by adding margin: 0 auto; to a container parent you can give yourself a bit of a gutter if you'd like. Also you should "clearfix" the containing div as well in this case. http://jsfiddle.net/6ws00cey/

.amount-column, .copies-column, .qty-column, .rate-column, .rate-rule-column{
    width: 20%;
    height: 30px;
    float: left;
    text-align: center;
}

.header-row{
    clear: both;
}

Upvotes: 0

Nishanth Matha
Nishanth Matha

Reputation: 6081

You are using fixed widths so when your screen size changes the elemts don't change accordingly. try using % widths instead: 

Ex:.copies-column{
    width: 23%; //Just an example but you need to adjust the width of all elements in % according to your desired output
    height: 30px;
    float: left;
}

Upvotes: 0

Related Questions