CODEWITHSUNDEEP
htmlcss
JasonMHirst
JasonMHirst

Reputation: 576

How to stop my DIVS from wrapping

I'm having an immense amount of trouble trying to get my CSS styles to work properly.

I have the following:

http://jsfiddle.net/JasonMHirst/PsBfc/

<div id="maingrid" style="overflow:auto">
    <div id="fieldheaders"></div>
    <div id="colDetailsGroup" class="col" style="float:left;">
        <div class="groupHeader grabhandle" style="text-align:center;">Details</div>
        <div id="col_CA1Details" class="columnHeader CA1">CA1</div>
        <div id="col_OWNDetails" class="columnHeader OWN">OWN</div>
        <div id="col_CTYDetails" class="columnHeader CTY">CTY</div>
        <div id="col_QUADetails" class="columnHeader QUA">QUA</div>
    </div>
    <div id="colVOLGroup" class="col" style="float:left;">
        <div class="groupHeader grabhandle" style="text-align:center;">Volume(s)</div>
        <div id="col_vol2007" class="columnHeader value">vol2007</div>
        <div id="col_vol2008" class="columnHeader value">vol2008</div>
        <div id="col_vol2009" class="columnHeader value">vol2009</div>
        <div id="col_vol2010" class="columnHeader value">vol2010</div>
        <div id="col_vol2011" class="columnHeader value">vol2011</div>
    </div>
    <div style="clear:both"></div>
    <div id="main2" style="border:1px solid red;"></div>
</div>

What I'm trying to do is when the outer div (#maingrid) becomes smaller than the width of the column, the divs within #fieldheaders are not wrapped but instead stay where they are and the scrollbar of #maingrid comes into force.

Can someone explain to me what rules are needed to STOP every <div/> within #colDetailsGroup which is within #fieldheaders from wrapping when the #maingrid becomes too small.

Upvotes: 0

Views: 70

Answers (1)

Linus Caldwell
Linus Caldwell

Reputation: 11058

You could achieve this by using display: inline-block instead of floating the .cols. You need to remove the inline style float: left from the .col divs

<div id="colDetailsGroup" class="col"><!-- ... --></div>
<div id="colVOLGroup" class="col"><!-- ... --></div>

and change your css to:

#maingrid {
    border:1px solid black;
    height:200px;
    width:200px;
    font-size: 0; /* to prevent white space */
    white-space: nowrap; /* to prevent line break */
}

.col {
    display: inline-block;
}

Here is a demo.

Upvotes: 1

Related Questions