CODEWITHSUNDEEP
htmlcsslayout
Philipp Wacker
Philipp Wacker

Reputation: 253

Put main text in onecolumn, images in separate right column

I would like to layout a webpage as sketched in the image: enter image description here The main text (a series of div elements) is supposed to go in a main column. I do have occasional images and remarks that relate to the text but with which I don't want to interrupt the actual text flow. How can I position a given image or "remark" text box to the right of a given div element in the main column?

In the following minimal example, how would I put the img element just to the right of the second div element?

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare, 
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit 
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
 vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis 
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut 
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit 
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non 
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor 
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed 
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non. 
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt. 
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet. 
</div>

<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna 
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus. 
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at 
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem 
semper non. Phasellus ac augue et purus vulputate suscipit. 
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit 
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas 
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at 
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
 tortor. Ut vel felis dolor. 
</div>

<img src="img.png"/>

Upvotes: 0

Views: 22

Answers (1)

kademat
kademat

Reputation: 134

The easy way is to add calc width (for example 100% - 100px for 100px wide column right):

.leave-space-form-right {
  width: calc(100% - 100px);
  float:left;
}

.put-element-on-right {
  float:left;
}

Here is an example:

https://jsfiddle.net/txdue3n0/6/

Upvotes: 1

Related Questions