HTML - How do I split different ratio in div?

Question

I'm trying to do layout like the image but i failed to do .

My code:

<div>
<div style="float: left; width: 70%">I'm on the left</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

<div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%">I'm on the second on the left</div>
</div>

<div>
<div style="float: left; width: 70%">I'm on the left</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

Any ways that i could achieve the layout i need?

Possible duplicate of [How to wrap text around an image using HTML/CSS](https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css) — Seblor, Apr 09 '19 at 09:20
it's just a matter of float clearing: `body > div { height: auto; overflow: hidden; }` — Fabrizio Calderan, Apr 09 '19 at 09:20
Check this: https://stackoverflow.com/questions/30908987/alternate-div-to-have-images-lefteven-or-rightodd — Aasim Hussain Khan, Apr 09 '19 at 09:21
`body > div { clear: both; }` will do the work. it clears the float — Maximilian Kaske, Apr 09 '19 at 09:27

Pons Purushothaman · Accepted Answer · 2019-04-09T10:53:31.977

1

add width: 100%; float:left; to parent divs like below

<div style="width: 100%; float:left; margin-bottom: 30px;">
<div style="float: left; width: 70%; background: green">I'm on the left</div>
<div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

<div style="width: 100%; float:left; margin-bottom: 2px">
<div style="float: left; width: 30%; background: green"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%; background: red">I'm on the second on the left</div>
</div>

<div style="width: 100%; float:left;">
<div style="float: left; width: 70%; background: green">I'm on the left</div>
<div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

edited Apr 09 '19 at 10:53

answered Apr 09 '19 at 09:21

Pons Purushothaman

2,225
1
14
23

Thanks for the code, I'm trying to
in between sections but it doesn;t work, any ways i could achieve ? – hatched Apr 09 '19 at 10:26
it works , its just an extra , because i want to have more space between each section , but
between the
s doesn't seems working
– hatched Apr 09 '19 at 10:43
is not the best way. Use margin for the parent element so you can adjust the spacing pixel by pixel. I have updated the code with margin. – Pons Purushothaman Apr 09 '19 at 10:49

score 1 · Answer 2 · answered Apr 09 '19 at 09:26

When you float items, they lose their height. When you add a minimum height to the parent divs, the problems will be fixed.

<div style="min-height: 150px;">
  <div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div style="float: left; width: 30%">
  <img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%">
  </div>
</div>

<div style="min-height: 150px;">
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div style="min-height: 150px;">
<div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

Thanks for the code, I'm trying to
in between sections but it doesn;t work, any ways i could achieve ? — hatched, Apr 09 '19 at 10:26
Why are u trying that? What are you trying to achieve? Maybe a css solutions will be better. — Wimanicesir, Apr 09 '19 at 10:38

score 0 · Answer 3 · answered Apr 09 '19 at 09:21

0

Many ways to achieve this

Can add direction:rtl to second parent div

Can change order of second div so div with image is after div with text.

Can float img right in second div

can use display:flex and flex-direction:row-reverse

answered Apr 09 '19 at 09:21

TeT Psy

341
3
7

wiesson · Answer 4 · 2019-04-09T23:49:39.480

You could go with flexbox and make use of flex-direction: row-reverse;. The flex property on the child elements (image and text) defines the ratio, in this case, the text with flex: 3 is three times bigger than the image.

Flexbox Browser support: https://caniuse.com/#search=flexbox

.section {
  display: flex;
  padding-bottom: 1rem;
}

.section--reversed {
  flex-direction: row-reverse;
}

.section__text {
  flex: 3;
  border: 1px dashed tomato;
}

.section__image {
  flex: 1;
  border: 1px dashed tomato;
}

<div class="section">
  <div class="section__text">Here is some text</div>
  <div class="section__image">here is an image</div>
</div>

<div class="section section--reversed">
  <div class="section__text">Here is some text</div>
  <div class="section__image">here is an image</div>
</div>

padding and border are only for demo purposes

HTML - How do I split different ratio in div?

4 Answers4