CODEWITHSUNDEEP
htmlcss
FlyboyMike
FlyboyMike

Reputation: 23

Inline image and text not lining up correctly

I have the code below on this site. Scroll to the bottom and you'll see my problem: I want the image and its associated text to be inline.

<div id="photo1" style="height:220px; width:740px; float:left; display:inline-block; vertical-align:top; margin:0;">
    <img src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1">
    <div id="bio1" style="vertical-align:top; height:200px; width:540px; padding-left:220px; float:left; font-family:verdana,arial,sans-serif; font-size:11px;">Bio text blah blah</div>
</div>

Any ideas on how I can fix this?

Upvotes: 0

Views: 1149

Answers (7)

rink.attendant.6
rink.attendant.6

Reputation: 46257

Float the image and move the description using margin. Also remove the height from the containing div

<div id="photo1" style="clear: both; width: 90%; margin: 0 auto;">
    <img src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" style='float: left; border: 1px solid black;'>
    <div id="bio1" style="margin-left:220px;  font-size:11px;">Bio text blah blah</div>
</div>

Alternatively you can use CSS table layout (not HTML tables), but I don't think that is necessary here.

I would also suggest using classes to avoid inline CSS:

CSS

.bio {
    clear: both;
    width: 90%;
    margin: 0 auto;
    font-family: Verdana, Arial, sans-serif;
}

.bio > img:first-child {
    float: left;
    border: 1px solid black;
}

.bio > div {
    margin-left: 220px;
    font-size: 11px;
}

HTML

<div id="photo1" class='bio'>
    <img src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran">
    <div id="bio1"><p>Bio text blah blah</p></div>
</div>

I would also suggest looking at "clearfixes".

Upvotes: 0

vittore
vittore

Reputation: 17589

Check this fiddle http://jsfiddle.net/X2GMR/ You have tons of extra styles.

CSS: 

    .photo1 {
        position:relative; 
        height:220px; 
        width:740px; 
        margin:0;"
    }

    .photo1 img {
        float:left;
        width:200px;
        height:200px;
        margin-right:20px;
        border:1 px solid black;
        padding:0;
    }

    .photo1 p.bio1 {
        font-family:verdana,arial,sans-serif; 
        font-size:11px;
        margin-left:220px;
    }

Markup:

    <div class="photo1" style=">
        <img src="http://lorempixel.com/g/200/200" width="200" height="200" alt="Dr. Mike Moran" />
        <p class="bio1" >Bio text blah blah</p>
    </div>

    <div class="photo1" >
        <img src="http://lorempixel.com/g/200/200" width="200" height="200" alt="Dr. Mike Moran"  />
        <p class="bio1" >Bio text blah blah</p>
    </div>

Upvotes: 0

curyfernando
curyfernando

Reputation: 21

Put the image and text inside the same div.

Align the image 

style: "float: left;"

and do the necessary ajustments

I think it helps:

<div id="bio1" style="vertical-align:top; margin:0; height:200px;   float:left; font-family:verdana,arial,sans-serif; font-size:11px;"><img class="alignleft" src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1" style="
float: left;">
<p style="padding-left: 225px;"><strong>Dr. Mike Moran</strong>

attended Cornell University and obtained his B.S. in Neurobiology and Behavior in 1995.  He then followed his love of music and adventure to California where he attended the UC Davis School of Veterinary Medicine, graduating in 2002.
<br><br>
After practicing for 10 years in San Francisco, he and his ever expanding family moved to Louisville, Colorado where Dr. Mike joined the Animalhouse team.  He is honored to be a part of such a renowned Louisville establishment  - helping to continue the legacy of the Animalhouse commitment to the highest quality compassionate care.  Dr. Mike lives with his wife, also a veterinarian, his four children and their dog, three cats and hamster.  He enjoys listening to and playing music, snowboarding, fishing and hiking.</p>

Upvotes: 0

Jacques
Jacques

Reputation: 3774

Change your format to be like this:

js fidlle: http://jsfiddle.net/hSFtV/3/

   <div id="photo1" style="height:220px; width:740px; float:left;">
                <p id="bio1"><img class="alignleft" style="border:none; float:left; padding:0 10px 10px 0" src="http://www.animalhouseclinic.com/media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1">Content Here</p>


                <br><br>
                <div id="photo2" style="height:220px; width:740px; float:left">
                    <p id="bio2">
                    <img src="http://www.animalhouseclinic.com/media/chad_w.jpg" width="200"  style="border:none; float:left; padding:0 10px 10px 0" height="200" alt="Dr. Chad Steward" border="1">Contente Here</p>
            <br><br>
                <div id="photo3" style="height:220px; width:740px; float:left">
                <p id="bio3">
                <img src="http://www.animalhouseclinic.com/media/kelly_w.jpg"  style="border:none; float:left; padding:0 10px 10px 0"  width="200" height="200" alt="Dr. Kelly Keeney" border="1">Content Here</p>
</div>

Upvotes: 0

Ms. Nobody
Ms. Nobody

Reputation: 1219

I would put both elements in one div and set the image to float:left and the text to go around it.

DEMO: http://jsfiddle.net/SZ7nr/4/

HTML:

<div id="photo1">
    <img src="http://www.animalhouseclinic.com/media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1" />
    <div id="bio1">Bio text blah blah</div>
</div>

CSS:

#photo1{
    height:220px; 
    width:740px; 
    display:block; 
    vertical-align:top; 
    margin:0;    
}

#photo1 img{
    float: left;
    margin-right: 5px;
}

#bio1{
    vertical-align:top; 
    height:200px; 
    width:520px; 
    font-family:verdana,arial,sans-serif; 
    font-size:11px;
}

Upvotes: 0

artSx
artSx

Reputation: 1630

Ok :

1st step remove this : 

#maincontainer {
    height: 1200px;/* remove this line */
    overflow: hidden;/* add this for float element */
}

2nd step :

add all you're picture float:left;

#photo1 > img {float:left;}
#photo2 > img {float:left;}
#photo3 > img {float:left;}

3rd step :

remove all float:left; from #bio1 / #bio2 / #bio3

And you have this : enter image description here

Upvotes: 1

Justinas
Justinas

Reputation: 43507

For #bio1, #bio1 and so on:

width: 530px; //reduce width; remove padding;

For images: add 

float: left;

And i think you vertical-align has no effect. Parent container must have display: table and div with text must have display: table-cell, for v-align take effect

Upvotes: 0

Related Questions