CODEWITHSUNDEEP
htmlcss
steveai
steveai

Reputation: 177

placing text beside an image using inline-block problems

I want to use the inline-block feature to keep everything responsive but I am running into a problem.

The problem is that my background image isn't showing up and they aren't horizontal (side by side) as opposed to how they are now stacked on top of each other .. what am I missing?

I've quickly recreated the problem I am having here:

Fiddle

HTML:

<section>
                    <div class="first">
                        <p>hello this is some text</p><p>and here is some more text </p>
                    <div class="ipad"></div>
                    </div>
                </section>

CSS:

.first {
    display: inline-block;
}

.ipad {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
}

I'm probably missing something quite simple, I have Google much and still am at a loss.

Upvotes: 0

Views: 5849

Answers (3)

soundswaste
soundswaste

Reputation: 3074

2 things ..

  1. If you want your paragraphs <p> to come inline, you need to add inline-block to them, and not their parent :

    .first p{
    display: inline-block;
}

  2. Your image will show if you provide its height and width in the div's style.

    .ipad {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
    height:100px; //<- provide height
    width:100px; //<- provide width
}

EDIT : To have all your children come inline no matter how wide they are, use this on their parent .first :

.first{
    white-space:nowrap;
}

Updated fiddle :

http://jsfiddle.net/NQ4Yv/2/

Upvotes: 3

Tomer
Tomer

Reputation: 17940

First of all, in order for the ipad image to appear, you need to give the div a dimension:

.ipad {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
    width: 220px;
    height: 274px;
}

Then set float:left or display:inline-block on the <p> to make them move next to each other:

.first p{
    display: inline-block;
}

see fiddle: http://jsfiddle.net/NQ4Yv/3/

If you want the background image behind the paragraphs then do something like this:

.first{
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
    width: 220px;
    height: 274px;
    padding: 0 20px;
}
.first p{
    display: inline-block;
    color: white;
}

updated fiddle: http://jsfiddle.net/NQ4Yv/4/

Upvotes: 0

Mahmood Kohansal
Mahmood Kohansal

Reputation: 1041

you can use 

p {
   float: left
}

for side by side paragraphs.

Upvotes: 0

Related Questions