user3803747 user3803747 - 6 months ago 26
HTML Question

Cannot place image beside text

I'm trying to create a responsive page with bootstrap where the image is beside the text. However the image keeps getting below the text and would disppear when the window is resized to a smaller width?

Here's an example of the issue i'm facing:
https://jsfiddle.net/2e6d5oq6/

This is my HTML code:

<body>

<div class="headerContainer">

<div class="col-lg-8 center-block">

<div class="panel panel-default">

<div class="panel-body">
<h1><strong>Resources</strong> </h1>
This page is to provide someis tincidunt.
</div>

</div> <!-- end panel panel-default -->

</div><!-- end col-lg-8 -->

</div> <!-- end introduction -->

<div class="resourceContainer">

<div class="col-lg-8 center-block">

<div class="panel panel-default">

<div class="panel-body">

<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span> &nbsp <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>

<div class="col-lg-7">

<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>

<div class="col-md-10">
<img class="image1" src="image/fun.png" width="130%" >
</div>

</div> <!-- end row -->

</div> <!-- end col-lg-7 -->

</div> <!-- end panel-body -->

<div class="panel-body">

<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span> &nbsp <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>

<div class="col-lg-7">
<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. Donec tempor consequat mi ut
egestas. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="image/fun.png" width="130%" >
</div>

</div> <!-- end row -->

</div> <!-- end col-lg-7 -->

</div>
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span> &nbsp <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>

<div class="col-lg-7">

<div class="row">

<p class="jobDescription">
Maecenas sit amet aliquet metus. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="image/fun.png" width="130%" >
</div>

</div> <!-- end row -->

</div> <!-- end col-lg-7 -->

</div> <!-- end pane-body -->

</div> <!-- end panel panel-default -->

</div> <!-- end col-lg-8 -->

</div> <!-- end container 2 -->

</body>


This is my CSS code:

.resourceContainer{
display:block;
font-size: 130%;
font-family: baskerville old face;
padding-top:3%;
margin-bottom:10%;
}


Thank you in advance :)

Answer

Have a look at this code below.

You will see where I commented out a div wrapper and also added a div that wraps the open p class.
You should look at resizing the image too.

If you use the class of col-sm-xx the two divs will stay side by side long when resized... if that help you.

Basically... all you needed to do here was this.

Within the row set 2 div blocks.

The left/first having a width of... col-sm-7.

The right/second div block having a width of... col-sm-5.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%; 
}  
  
/*resource page*/
.resourceContainer{
    display:block;
    font-size: 130%;
    font-family: baskerville old face;
    padding-top:3%;
    margin-bottom:10%;
}
    
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container col-lg-12 spacer"></div>
    
    <div class="headerContainer">

        <div class="col-lg-8 center-block">

            <div class="panel panel-default">

                <div class="panel-body">
                    <h1><strong>Resources</strong> </h1>
                  This page is to provide someis tincidunt. Donec faucibus 
                  diam arcu, a posuere nunc tempus et. Aliquam
                  eu condimentum lacus. Phasellus ac semper nisi. 
                  Vestibulum et nisi tristique,
                </div>

            </div> <!-- end panel panel-default -->

        </div><!-- end col-lg-8 -->

    </div> <!-- end introduction -->

    <div class="resourceContainer">

        <div class="col-lg-8 center-block">

            <div class="panel panel-default">

                <div class="panel-body">

                    <div class="page-header">
                        <div class="resource1">
                            <h3>  Tip on having a FUN working environment</h3>
                            <p> <span class="name">John Yu Chi Cheng </span> &nbsp <span class="time"> 12:20PM 08-06-2015</span></p> 
                        </div>
                    </div>

                  <!--  <div class="col-lg-12"> -->

                        <div class="row col-lg-12">
                            <div class="col-sm-7"> 
                            <p class="jobDescription">
                                Maecenas sit amet aliquet metus. Duis maximus 
                                fermentum mi quis tincidunt. Donec faucibus 
                                diam arcu, a posuere nunc tempus et. Aliquam
                                eu condimentum lacus. Phasellus ac semper nisi. 
                                Vestibulum et nisi tristique, condimentum tellus 
                                vitae, pellentesque quam. Curabitur quis ipsum 
                                sagittis lectus porttitor convallis vel vitae
                                mauris. Quisque purus ligula, tristique at erat eget,
                                commodo bibendum dui. Pellentesque efficitur hendrerit
                                libero id lacinia. Duis porta et erat in suscipit. Etiam 
                                id tortor quis enim feugiat efficitur. Proin nulla tortor,
                                lobortis vel tempus id, condimentum eget quam. Nunc 
                                faucibus rutrum facilisis. Donec tempor consequat mi ut 
                                egestas. Etiam fringilla dui eget urna facilisis venenatis. 
                                <a href="#" class="btn btn-default">Read More</a>
                            </p>
                            </div>        
                            <div class="col-sm-5"> 
                                <img class="image1 image-responsive" src="http://i.stack.imgur.com/PUvCK.png" width="100%" >
                            </div>

                        </div> <!-- end row -->

                   <!-- </div>--> <!-- end col-lg-7 -->

                </div> <!-- end panel-body -->

                <div class="panel-body">

                    <div class="page-header">
                        <div class="resource1">
                            <h3>  Tip on having a FUN working environment</h3>
                            <p> <span class="name">John Yu Chi Cheng </span> &nbsp <span class="time"> 12:20PM 08-06-2015</span></p> 
                        </div>
                    </div> 

                    <div class="col-lg-7"> 
                        <div class="row">
                            <p class="jobDescription">
                                Maecenas sit amet aliquet metus. Duis maximus 
                                fermentum mi quis tincidunt. Donec faucibus 
                                diam arcu, a posuere nunc tempus et. Aliquam
                                eu condimentum lacus. Phasellus ac semper nisi. 
                                Vestibulum et nisi tristique, condimentum tellus 
                                vitae, pellentesque quam. Curabitur quis ipsum 
                                sagittis lectus porttitor convallis vel vitae
                                mauris. Quisque purus ligula, tristique at erat eget,
                                commodo bibendum dui. Pellentesque efficitur hendrerit
                                libero id lacinia. Duis porta et erat in suscipit. Etiam 
                                id tortor quis enim feugiat efficitur. Proin nulla tortor,
                                lobortis vel tempus id, condimentum eget quam. Nunc 
                                faucibus rutrum facilisis. Donec tempor consequat mi ut 
                                egestas. Etiam fringilla dui eget urna facilisis venenatis.
                               <a href="#" class="btn btn-default">Read More</a>
                            </p>
                               <div class="col-md-10"> 
                                   <img class="image1" src="http://i.stack.imgur.com/PUvCK.png" width="130%" >
                               </div>

                        </div> <!-- end row -->

                    </div> <!-- end col-lg-7 -->

                </div>
                    <div class="panel-body">
                    <div class="page-header">
                        <div class="resource1">
                            <h3>  Tip on having a FUN working environment</h3>
                            <p> <span class="name">John Yu Chi Cheng </span> &nbsp <span class="time"> 12:20PM 08-06-2015</span></p> 
                        </div>
                    </div>

                    <div class="col-lg-7"> 

                        <div class="row">

                            <p class="jobDescription">
                                Maecenas sit amet aliquet metus. Duis maximus 
                                fermentum mi quis tincidunt. Donec faucibus 
                                diam arcu, a posuere nunc tempus et. Aliquam
                                eu condimentum lacus. Phasellus ac semper nisi. 
                                Vestibulum et nisi tristique, condimentum tellus 
                                vitae, pellentesque quam. Curabitur quis ipsum 
                                sagittis lectus porttitor convallis vel vitae
                                mauris. Quisque purus ligula, tristique at erat eget,
                                commodo bibendum dui. Pellentesque efficitur hendrerit
                                libero id lacinia. Duis porta et erat in suscipit. Etiam 
                                id tortor quis enim feugiat efficitur. Proin nulla tortor,
                                lobortis vel tempus id, condimentum eget quam. Nunc 
                                faucibus rutrum facilisis. Donec tempor consequat mi ut 
                                egestas. Etiam fringilla dui eget urna facilisis venenatis.
                              <a href="#" class="btn btn-default">Read More</a>
                            </p>
                            <div class="col-md-10"> 
                                <img class="image1" src="http://i.stack.imgur.com/PUvCK.png" width="130%" >
                            </div>

                        </div> <!-- end row -->

                    </div> <!-- end col-lg-7 -->

                    </div> <!-- end pane-body -->

            </div> <!-- end panel panel-default -->

        </div> <!-- end col-lg-8 -->

    </div> <!-- end container 2 -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
</body>
</html>

enter image description here