CODEWITHSUNDEEP
htmlcss
user1032531
user1032531

Reputation: 26281

Display DIV inline which contain P block

I would like div.div-block and p.div-p to remain their default display:block, however, div-inline to be display:inline. The desired result is three horizontal div's each with several vertically stacked p's blocks.

I've tried div.div-block div {display:inline;}, but div.div-inline are still vertically positioned. When I add div.div-block div p {display:inline;}, the div's are horizontal, but so are the p's.

<div class="div-block">
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
    </div>
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
    </div>
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
    </div>
</div>

Upvotes: 0

Views: 173

Answers (3)

Vishwanath
Vishwanath

Reputation: 6004

All you need is float left to the inline div you are talking about.

.div-inline{
    float : left;
    width:33%;
}

.clear{
    clear:both;
}

You have to take care of clearfix for continuous flow of next content on new block. You also need to set width depending upon number of columns you want. Working fiddle here with clear fix and width.

http://jsfiddle.net/kXpX2/3/

Upvotes: 0

Soturi
Soturi

Reputation: 1496

You need to use display: inline-block with a set width. The width is important because when your content grows past "bla bla bla" you will run into wrapping issues. Also, vertical-align: top is needed to position text at the top.

.div-inline {
    display: inline-block;
    width: 33%;
    vertical-align: top; }

Also, if you care about IE7 compatibility, you need some IE7 hacks. I commonly use the following for IE7 compatibility:

.div-inline {
    display: inline-block;
    *display: inline;  // IE7
    *zoom: 1;          // IE7
    width: 33%;
    vertical-align: top; }

Here is a JSFiddle

Upvotes: 1

Joeytje50
Joeytje50

Reputation: 19112

What you're looking for is probably inline-block. If you make your .div-inline class have div.div-inline {display:inline-block;}, they will position next to each other. Of course wrapping still works, so if the div would fall off the page, it still wraps the whole block.

Upvotes: 2

Related Questions