div位于上一个

Question

I am simply trying to get all the text on this page to appear to the right of the picture. Everything is pushed below. Tried adding float: left to both image and text but they just come out of their container instead and are in the same position.

Link to the live Demo

CSS

.full-bio-container {
    padding: 10px;
    background-color: #fff;
    margin-top: 40px;
}

#full-bio-chef-pic {
    display: inline-block;
    position: relative;
    left: 0;
    vertical-align: top;
}

.full-bio-info {
    display: inline-block;
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    padding: 0px 10px 10px 10px;
    vertical-align: top;
}

HTML

<!-- Start Chef Bio -->
<div class="full-bio-container">
    <div id="full-bio-chef-pic">
        <img src="img/about/head-chef.jpg" alt="" title="" height="300" width="200" />
    </div>
    <div class="full-bio-info">
        <h4>Head Chef - Ed</h4>
        <p class="full-bio-caption">“Ed admiring the sample plates kindly supplied by Churchill’s, a strange love affair in ongoing with these plates. Thank You to Churchill’s for their amazing support"</p>
        <p>As soon as he was tall enough to reach the kitchen work-tops Ed would be found helping in the kitchen.  One of his mother’s earliest memories was seeing him standing on a chair naked except for an apron adding toppings to pizza bases!</p>
        <p>Over the years his passion for cooking had developed and his skills improved. After leaving school proudly clutching the Food Technology prize he went onto to study at Westminster Kingsway college London where he obtained the Professional Chef qualification. During his time at Westminster he won several competitions including National Young Chef of the year from this prestigious college.</p>
        <p>After leaving college Ed’s experience has ranged from fine dinning in London’s top restaurants to village gastro pubs, along with a wide variety of other experiences from private dinning and chalet chef to some of the UK’s top celebrities.</p>
        <p>It was as result of a conversation with one of his clients that The Naked radish was born. His is aim to share his passion for food and help you fall in love with cooking again by taking the drudgery away and creating inspiring, healthy recipe kits and sharing chef’s tips which often stay secret in the kitchen.</p>
    </div>
</div>
<!-- End Chef Bio -->

Answer 1

Try to change these on css. What I changed, I made the content more narrow. And floated both containers, img to left and content to right.

#full-bio-chef-pic {
display: inline-block;
position: relative;
left: 0;
vertical-align: top;
float: left;
}

.full-bio-info {
display: inline-block;
position: relative;
left: 0;
width: auto;
float: right;
width: 700px;
height: auto;
padding: 0px 10px 10px 10px;
vertical-align: top;
}

Answer 2

If you want to float elements they need a fixed width. Give .full-bio-info a width of 695px(for example) and it will work.

Or is there a special reason for that width: auto; ?

If you want dynamic width you should use "img/about/head-chef.jpg" as a Backglound-image of .full-bio-info and give .full-bio-info a padding (left) of 200px(or more) too.

Answer 3

Use the following CSS. What I changed is float: left; on the full-bio-chef-pic and removed display: inline-block on full-bio-info.

#full-bio-chef-pic {
    display: inline-block;
    float: left;
    position: relative;
    left: 0;
    vertical-align: top;
}

.full-bio-info {
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    padding: 0px 10px 10px 10px;
    vertical-align: top;
}

I hope this works.