CODEWITHSUNDEEP
htmlcss
John Ohara
John Ohara

Reputation: 2901

Float block to right of other content

I've read a few solutions with similar titles but none with a solution to this layout.

I have 3 content blocks which all stack beneath each other at most screen widths.

However, when content become overly wide, I want to display a slightly different format.

I want to display the media to the right and the title and text to the left with the text directly beneath the title. It currently sits below the media block (as per the snippet).

anyone know how I can fix it?

.content {
  overflow:hidden;
}

.chart {
  height: 200px;
  width: 200px;
  background-color: red;
}

.title, .text {
  float:left;
}

.media {
  float:right;
}
<div class="content">
  <h3 class="title">This is a reasonably long title</h3>
  <div class="media">
    <div class="chart"></div>
  </div>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non urna est. Quisque sed dolor ac ex aliquet aliquet. Integer ornare, velit vitae iaculis faucibus, nulla libero molestie sem, eget placerat augue massa vitae justo.</p>
</div>

Upvotes: 0

Views: 46

Answers (2)

John Ohara
John Ohara

Reputation: 2901

While both previous answers do work to some degree, both fail to fully address the initial question.

The first, requires a change in the order of elements and the second applying a fixed width which was restrictive.

The final solution is in 2 parts so that it works with multiple screen sizes and media queries.

Firstly I changed the order of the elements as per answer 1. This enabled me to achieve the layout required for my 8 column (wide layout). I applied this styling using an 8 column only media query.

For all other screen sizes, I use display flexbox, which allows me to restore the order I require.

Upvotes: 0

user5718206
user5718206

Reputation:

There are 2 things you need to do:

1) You need to add a width for your text block, cause now it's 100% and it takes 100% of parent block width - so no floating will be.

2) You need to add to text block a clear property with left value - cause you don't need it to be floated by the headerfrom the left side.

It's all you need to solve the issue:

.text {
  clear: left;
  width: 50%; /* put your own width (no matter percents or pixels), but it must be less than (parent block width - media width)*/
}

Check here the example: https://codepen.io/fox_hover/pen/8f838b7799db7a3ed4f4d742097440ef

Upvotes: 1

Related Questions