CODEWITHSUNDEEP
htmlcssweb
XxS0ul678
XxS0ul678

Reputation: 137

How to float pictures with text side by side

I am trying to do two things: 1) Make the three pictures float side by side 2) Create a border filled with the text in the p element below each picture.

Here is an idea of what I am trying to achieve.enter image description here

Here is what I've done so far...

<div class="fitness-section">
		<h1>Get fit</h1>
		<img src="images/EssentialWorkouts.png" alt="essentialworkouts" class="essential">
		<h5>Essential Workouts</h5>
		<p>Going to a gym is definitely the best way to transform and build your body.
		   However, It is common for many people especially new-gymmers to feel nervous,
		   intimidated and lost in the gym. There are many effective and essential
		   workouts that are bound to get you ripped and buff in no time!</p>
		<a href="" class="button">Find out more</a>
	
	</div>
	
	<div class="fitness-section">
		
		<img src="images/Motivation.png" alt="motivation" class="motivation">
		<p>Have you ever felt unmotivated and lost your will to gym? Fret not, there are 
           many inspirational quotes and articles here that will help you generate and 
           maintain a flow of positive attitude to keep you motivated to achieve your
           fitness and goals in life!</p>
        <a href="" class="button">Find out more</a>
	</div>
	
	<div class="fitness-section">
		<h1>Get fit</h1>
		<img src="images/Shoe.png" alt="shoe" class="shoe">
		<p>Working out in the gym with a proper attire is an absolute neccessity to achieve
		   the best workout possible. Wearing attire that is too tight or too loose will 
		   definitely affect your workouts. Discover and find out what you should and 
		   should not be wearing in the gym.</p>
		<a href="" class="button">Find out more</a>
	</div>

Upvotes: 0

Views: 1104

Answers (2)

Lars S.
Lars S.

Reputation: 1

I can recommend you, to use diffrent classes for your boxes

<div class="fitness-section div1">
    <h1>Get fit</h1>
    <img src="images/EssentialWorkouts.png" alt="essentialworkouts" class="essential">
    <h5>Essential Workouts</h5>
    <p>Going to a gym is definitely the best way to transform and build your body.
       However, It is common for many people especially new-gymmers to feel nervous,
       intimidated and lost in the gym. There are many effective and essential
       workouts that are bound to get you ripped and buff in no time!</p>
    <a href="" class="button">Find out more</a>
 </div>

 <div class="fitness-section div2">
     <img src="images/Motivation.png" alt="motivation" class="motivation">
     <p>Have you ever felt unmotivated and lost your will to gym? Fret not, there are 
        many inspirational quotes and articles here that will help you generate and 
        maintain a flow of positive attitude to keep you motivated to achieve your
        fitness and goals in life!</p>
     <a href="" class="button">Find out more</a>
</div>

<div class="fitness-section div2">
    <h1>Get fit</h1>
    <img src="images/Shoe.png" alt="shoe" class="shoe">
    <p>Working out in the gym with a proper attire is an absolute neccessity to achieve
       the best workout possible. Wearing attire that is too tight or too loose will 
       definitely affect your workouts. Discover and find out what you should and 
       should not be wearing in the gym.</p>
    <a href="" class="button">Find out more</a>
</div>

And for style use this: 

.fitness-section {
    width: 30%;
}

.div1 {
    float: left;
    background-color: red;
    margin: 15px 15px;
}

.div2 {
    float: left;
    background-color: blue;
    margin: 15px 15px;

}

div3 {
    float: right;
    background-color:yellow;
    margin: 15px 15px;
}

Upvotes: 0

Paul Redmond
Paul Redmond

Reputation: 3296

Here's some work to start you off.

html, body {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

.wrapper {
  text-align: center;
}

p {
  text-align: left;
  margin-top: 20px;
  border: 1px solid #000;
  padding: 10px;
  height: 150px;
}

.fitness-section {
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  margin-right: -4px;
  width: 300px;
}

https://codepen.io/anon/pen/MvyeEN

Upvotes: 1

Related Questions