-6

Well, im pretty new to grids and a little more experienced with tables. But im still not sure which is the best way to do it.

Here, this is what i want to do: Text all together in 3/4 parts of the area, and 1/4 with an image on the bottom right side. Considering that this is done inside a jquery mobile app/page (I guess that has nothing to do with this but i just had to mention it)

How would you guys do it?

This is how i need it

Alan Daniel
  • 69
  • 2
  • 10
  • Don't use tables for layout. Maybe consider using just the grid component of something like [Bootstrap](https://getbootstrap.com). See also: [Why not use tables for layout in HTML?](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – grooveplex Oct 31 '18 at 20:48
  • how could i do it with the Grid component? – Alan Daniel Oct 31 '18 at 20:54
  • Are the sentences beginning with Lorem and Duis different paragraph elements? What is above your image need to be a different element to make it work with either grid or table or any other technique. Floating image'd be OK if it was on top left/right of your text but that isn't the case here. – FelipeAls Nov 01 '18 at 08:57
  • They are the same sentence, Its one single

    – Alan Daniel Nov 02 '18 at 04:38
  • "Text all together in 3/4 parts of the area". How are you defining the area? If its height is from the top to the bottom of the text, you have a serious cyclic dependency problem. – Alohci Nov 03 '18 at 01:30
  • Its all inside a Div, with a custom Height and Width, but that doesnt matter, its mostly about how to do it with Grids – Alan Daniel Nov 03 '18 at 01:36

2 Answers2

5

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>
Reza Saadati
  • 5,018
  • 4
  • 27
  • 64
  • seems the same as this : https://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around – Temani Afif Nov 04 '18 at 08:57
  • @TemaniAfif As I see it, it is. But can not close it because it has a bounty – vals Nov 04 '18 at 19:33
  • @vals yes I know, I raised a moderator flag to close it or will close after the bounty ... let's hope we don't get a copy of all the answers here. – Temani Afif Nov 04 '18 at 19:35
0

with or without grid system you can achieve the desired results. I'ts more a CSS related matter as you can see in this example.

.wrapper {
  column-count: 2;
  column-gap: 50px;
  padding: 50px;
}

p {
  line-height: 1.6; 
  font-family: Helvetica;
  text-align: justify;
  margin: 0;
  font-size: 14px;
}

.star {
  float: left;
  width: 250px;
  shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg);
  shape-margin:20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.moon {
  border-radius: 50%;
  height: 200px; 
  width:200px;
  background-color: #2badd9;
  float: right;
  shape-outside: inset(1% round 50%);
  margin-left: 20px;
  margin-bottom: 10px;
}

Codepen code

hope it helps!

Jose
  • 31
  • 6