CODEWITHSUNDEEP
csscss-float
David
David

Reputation: 5537

How can I get contents in floating div to wrap on browser resize but not line break

I have 2 divs that needs to be displayed next to each other. The first div has just a number and the other is a link. When the browser (Firefox and chrome) is resized it places the 2nd div on a new line then wraps the text. I want the text of the 2nd div to wrap inline with the 1st.

here is my code

<html>
    <body>
        <style>

           .row {    
                    border: 1px solid yellow;
                    width: 100%;
                    overflow: auto; 
                }

          .cell {
                    float:left;    
                    border: 1px solid red;  
                }

        </style>

<div class="row">
    <div class="cell"><span>1</span></div>
    <div class="cell">
        <a>This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.</a>
    </div>
</div>

</body>
</html>

This is what I get in firefox but this is an not what I want enter image description here

This is what I get In IE which is what I want. enter image description here

Upvotes: 1

Views: 276

Answers (2)

isotrope
isotrope

Reputation: 1847

You're trying to float two block elements without giving them widths. A div is a block element (default = display: block;). That means that it will always stretch to width: 100% unless you specify its width. When trying to float two elements that are each width: 100%; they can't remain on the same line/row. (200% > 100% max);

Upvotes: 0

ptriek
ptriek

Reputation: 9276

You could achieve this by using display:table-cell instead of floats:

.row {
    border: 1px solid yellow;
    display:table-row;
}
.cell {
    display:table-cell;
    border: 1px solid red;
}

See fiddle here.

Upvotes: 1

Related Questions