Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]

by

Using a Grid System makes no sense for your example. A grid system needs columns and rows. In your case you would have only 1 row and 1 column. Well, you could nest that grid but it would be complicated quickly.

But this is one way how you could do it without grid and without a table:

.wrapper {
  max-width: 800px;
  height: 700px;
}

.spacer {
  height: calc(100% - 200px);
  width: 0px;
  float: right;
}

.item-1 {
  width: 330px;
}

img {
  height: 200px;
  width: 150px;
  float: right;
  clear: right;
}
<div class="wrapper">
  <div class="spacer"></div>
  <div class="item-1">
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" alt="image">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, iure nulla veniam ab ratione, dicta eaque voluptas voluptatem porro nemo fuga quas aut at laborum. Error architecto illum, est quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Numquam, iure nulla veniam ab ratione, dicta eaque voluptas voluptatem porro nemo fuga quas aut at laborum. Error architecto illum, est quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, iure nulla veniam ab ratione,
      dicta eaque voluptas voluptatem porro nemo fuga quas aut at laborum. Error architecto illum, est quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, iure nulla veniam ab ratione, dicta eaque voluptas voluptatem porro nemo
      fuga quas aut at laborum. Error architecto illum, est quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, iure nulla veniam ab ratione, dicta eaque voluptas voluptatem porro nemo fuga quas aut at laborum. Error architecto
      illum, est quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, iure nulla veniam ab ratione, dicta eaque voluptas voluptatem porro nemo fuga quas aut at laborum. Error architecto illum, est quaerat.Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Numquam, iure nulla veniam ab ratione, dicta eaque voluptas voluptatem porro nemo fuga quas aut at laborum. Error architecto illum, est quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, iure
      nulla veniam ab ratione, dicta eaque voluptas voluptatem </p>
  </div>
</div>

More Related Contents:

  1. Two column width 50% css [closed]
  2. Something weird with css
  3. Would your website perform better if you created stylesheets for each screen size, rather than using a feature such as Bootstrap?
  4. HTML & CSS : How do I change names and job titles to be under the pictures
  5. What’s the difference between an id and a class?
  6. Make grid container fill columns not rows
  7. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  8. Responsive grid of hexagons
  9. Why does styling the background of the body element affect the entire screen?
  10. SVGs not scaling properly in IE – has extra space
  11. Override browser form-filling and input highlighting with HTML/CSS
  12. Removing whitespace between HTML elements when using line breaks
  13. How to keep footer at bottom of screen [duplicate]
  14. How to give the background-image path in CSS?
  15. Bootstrap – 5 column layout
  16. Is there a way to get a web page header/footer printed on every page?
  17. Creating a ‘New’ spiky label with 24 or above point burst
  18. How to prevent text in a table cell from wrapping
  19. Half circle with CSS (border, outline only)
  20. How to implement curve background in CSS? [duplicate]
  21. How to prevent text from overflowing in CSS?
  22. Stretching tag to fill entire
  23. How to darken a background using CSS?
  24. How to keep :active css style after click a button
  25. CSS attribute selector does not work a href
  26. Make a perfect circle around a div of variable height
  27. Can you style ordered list numbers?
  28. Div with horizontal scrolling only
  29. Best Way to do Columns in HTML/CSS
  30. Table with table-layout: fixed; and how to make one column wider

Leave a Comment