Question 256938 in Html Question posted in
Some basic documentation can be found here.

Html – Text in columns after floating image

I have a div containing a paragraph and an image floating right from it.
The image is variable in size and relative to the viewport, so I can’t use a fixed height for both the paragraph next to it and to image ("simulating" a floating picture).

Here is an example pen of the setup: https://codepen.io/etlaM/pen/vYvzEoQ

The styling of the image is as simple as follows:

.textimage {
  width: 50%;
  float: right;
}

My customer would like to have the text split into two columns after the height of the floating image.

So basically a look like in a newspaper.

I don’t think this is possible with pure CSS. But I wanted to ask you first before getting heights with JS.

Is there any way to style the elements (maybe structure them differently) to achieve the wanted look?

Thanks!

Tags:

2

Answers


  1. 0

    You could use a table / columns or use a framework like bootstrap to do following:

    .col-6   | .col-6
IMAGE    | TEXT
---------------
.col-6   | .col 6
TEXT     | TEXT
    Login or Signup to reply.
  2. 0

    Newspaper structure with columns exist : CSS multi-column layout

    Use css property column-count : ...

    Sanple code:

    article {
  font-size    : 14px;
  column-count : 2;
  width        : 46em;
  height       : 38em;
  }
article img {
  width      : 100%;
  padding    : 1.2em;
  box-sizing : border-box;
  }
article img + p {
  margin-top : 0;
  }
article p small {
  display    : inline-block;
  width      : calc( 100% - 2em );
  text-align : right;
  }
    <article>
  <p>The dog (Canis familiaris or Canis lupus familiaris) is a domesticated descendant of the wolf.</p>
  <p>Also called the domestic dog, it is derived from extinct Pleistocene wolves, and the modern wolf
    is the dog's nearest living relative.</p>
  <p>Dogs were the first species to be domesticated by hunter-gatherers 
    over 15,000 years ago before the development of agriculture. </p>
  <p>Due to their long association with humans, dogs have expanded to a large number of domestic individuals 
    and gained the ability to thrive on a starch-rich diet that would be inadequate for other canids.</p>
  <p>The dog has been selectively bred over millennia for various behaviors, sensory capabilities, 
    and physical attributes.</p>
  <p>Dog breeds vary widely in shape, size, and color. They perform many roles for humans, such as hunting, 
    herding, pulling loads, protection, assisting police and the military, companionship, therapy, and aiding 
    disabled people.</p>
  <img src="https://picsum.photos/id/837/200/200" alt="dog">
  <p>Over the millennia, dogs became uniquely adapted to human behavior, and the human–canine bond has 
    been a topic of frequent study.</p>
  <p>This influence on human society has given them the sobriquet of "man's best friend".</p>
  <p><small>Source: Wikipedia</small></p>
</article>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search