How to align image next to text and then stack them (responsive)


Tags: html5,css3,responsive-design

Problem :

How would you write HTML and CSS to have an image align next to text (alternating sides each row) and then stack them one on top of another for responsive view

.row {
  display: block;
  width: 100%;
}
.container {
  display: inline-block;
}
.left {
  float: left;
}
.right {
  float: right;
}
<div class="row">
  <img class="right" src="" width="300" height="300" />
  <div class="container">

    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius
      lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel
      nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.</p>
  </div>
</div>
<div class="row">
  <div class="container">

    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius
      lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel
      nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.</p>
  </div>
  <img class="left" src="" width="300" height="156" />
</div>

Please help as I stucked here for a long time. [Link to image with problem][1] ![Positioning of elements][1]

Image with elements: hudicek [dot] si/CSS [dot] jpg



Solution :

Check this.

http://jsfiddle.net/e7e1bhdd/

Dont forget to use

clear: both;

after floating


    CSS Howto..

    With Watin, how do I wait until an element gets a certain CSS class?

    How to trigger self hover on child element

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    Greasemonkey: How to do something when style=“display: none;” changes?

    how to set width,height etc to particular table in html

    How do I add a custom CSS image to the target background behind a given layer of text in Squarespace?

    How to edit CSS styles in JavaScript?

    How to prepend a div to another div using javascript

    How do I write a CSS for mouse hover [duplicate]

    How to make image fit in div using Jquery

    How to avoid AjaxMin removal for IE9 and below CSS hack

    How to change the value depend on css animation?

    How to include Material Design libraries without npm

    How can I center a tooltip below an element that is narrower than the tooltip?

    How does Wired magazine achieve this thick underline link effect?

    How do you set the background color for a variable height page?

    How to use CSS for mobile in the right way?

    How to solve this (seemingly simple) formatting problem in CSS?

    How to make the click logo appear without a href in css/html?

    How to add image after button/div css?

    How can I create CSS sprites from images stored in the database?

    How to use psd elements in an upload form? [closed]

    How to modify divs in grid template site?

    How to not lose the css while appending html to an element?

    How to make two buttons in column?

    How to not apply a css block?

    How to make multiple gradient work with CSS

    how to change width of without affecting width

    How can I use CSS to select the “a” tag in the following layout?

    How to change padding using php in options framework