CODEWITHSUNDEEP
phphtmlcss
user3030853
user3030853

Reputation: 17

How to show two rows of div in single div

I am showing div in one row using for loop. first div show done but insert new div. How to insert new div with same as first div. Thanks in advanced. Now this showing as -

"first-div first-div first-div first-div first-div first-div first-div first-div "

Now I want to show another div below of first div using same for loop.

I want like this-

"first-div first-div first-div first-div first-div first-div first-div first-div"

"minor-div minor-div minor-div minor-div minor-div minor-div minor-div minor-div"

CSS CODE-

#default-Div{
overflow-x: scroll;
width: 830px;
white-space:nowrap;
height: 110px;

}

.calender-column{
width:160px;
height:110px;    
border:1px solid #0174DF;
    display:inline-block;

PHP - HTML CODE -

<div id="default-Div"  >
<?php $temp=1; for($j=0;$j<30;$j++){?>

<div id="calender-column<?php echo $temp;?>" class="calender-column"   >

<?php $temp++; } ?>
</div>

Upvotes: 0

Views: 101

Answers (1)

Ming
Ming

Reputation: 4588

You can't use display: inline; with width and height, because that would no longer be inline. You can check the CSS Specification on display for more detailed information. Suffice to say, with display: inline;, this is not possible.

Thankfully, there's a new(ish) property value for display that will do exactly what you want: display: inline-block; -- to be inline in the document flow, but kinda-sorta display like a block-level element.

.calender-column{
width:160px;
height:110px;    
border:1px solid #0174DF;
    display:inline-block; }

... and you'll be fine :)

Note: the only caveat is, inline-block does not work in IE 6 or 7. You can, however, change the display to purely inline just for those two browsers, as they incorrectly render inline as inline-block anyway.

Upvotes: 2

Related Questions