With floating images, can paragraphs or divs remain in the same column in their entirety?

Question

I have a page with a column of floating images on the left, and some paragraphs and other elements on the right. What I would like is for each element on the right side to remain consistently within a single column regardless of how the floating images fall on the page.

Here's what I have so far:

.parent {
  border: 1px solid green;
}

.images {
  float: left;
  border: 1px solid blue;
}

.content {
  border: 1px solid red;
}

.content:before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 0;
}

.image-ul {
  list-style-type: none;
  padding: 0;
  margin-right: 15px;
}

li {
  list-style-position: inside;
}

<div class="parent">
  <div class="images">
  <ul class="image-ul">
    <li><img src="https://i.imgur.com/kGKLgnu.png"/>
    </li>
    <li><img src="https://i.imgur.com/kGKLgnu.png"/>
    </li>
   </ul>
  </div>  
  <div class="content">
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <ul>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    </ul>
  </div>
</div>

Note that depending on how the page is sized, the paragraph or list might be broken up around the images like this:

That's what I'm trying to avoid. I want each paragraph, list, block, or whatever that spills over the bottom of the images to remain in the single column and with the same width. The following element can then fill the document width, like this for example:

How could I do this?

https://stackoverflow.com/questions/9966890/best-way-to-do-columns-in-html-css — Raúl Martín, Nov 24 '20 at 21:54

John · Accepted Answer · 2020-11-24T22:48:10.183

1

ul {
  display: inline-block;
}

p{
  display: flex;
}

See here:

.parent {
  border: 1px solid green;
}

.images {
  float: left;
  border: 1px solid blue;
}

.content {
  border: 1px solid red;
}

.content:before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 0;
}

.image-ul {
  list-style-type: none;
  padding: 0;
  margin-right: 15px;
}

li {
  list-style-position: inside;
}

ul {
  display: inline-block;
}

  p{
      display: flex;
    }

<div class="parent">
  <div class="images">
  <ul class="image-ul">
    <li><img src="https://i.imgur.com/kGKLgnu.png"/>
    </li>
    <li><img src="https://i.imgur.com/kGKLgnu.png"/>
    </li>
   </ul>
  </div>  
  <div class="content">
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <ul>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    </ul>
  </div>
</div>

edited Nov 24 '20 at 22:48

answered Nov 24 '20 at 22:28

John

5,132
1
6
17

This doesn't quite get me what I want. I'm looking for any element that falls completely below the images to take up the full width of the page. I've edited my question to include an illustration of this. – Bri Bri Nov 24 '20 at 22:35
@GuyGizmo Undertsood. I have updated my answer to do what you are looking for :). Take a look! – John Nov 24 '20 at 22:37
@John this won't work based on OPs updated image. OP wants the list items to fall below the images, but that won't work with the current markup. – disinfor Nov 24 '20 at 22:39
@John That's close! It works for the list, but is there something I can use for the paragraphs as well? If I set their `display` property to `inline-block` then they all fall below the images. – Bri Bri Nov 24 '20 at 22:43
@GuyGizmo yes but add this CSS code: `p{ display: flex; }` to do it for the paragraphs. I've updated my answer to reflect this. – John Nov 24 '20 at 22:47
2

`display:flex` works well for the example provided, but any phrasing child elements of the paragraphs is going to mess it up. Better would be to use `display:flow-root`, or the old-fashioned way was to use `overflow:hidden` or `overflow:auto`. – Alohci Nov 24 '20 at 23:01
@John You got it! I think I agree with @Alohci though that `flow-root` is better. – Bri Bri Nov 24 '20 at 23:17
@GuyGizmo glad to have helped and yes I do agree the `flow-root` would probably be better. – John Nov 24 '20 at 23:19

score 0 · Answer 2 · answered Nov 24 '20 at 21:56

You can use flex for this - no need to use float (float is slowly becoming deprecated):

Set the parent to display: flex and then set the flex property on images and content;

Some reading:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  border: 1px solid green;
  display: flex;
}

.images {
  border: 1px solid blue;
  flex: 1 1 auto;
}

.content {
  border: 1px solid red;
  flex: 1 1 auto;
}

.content:before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 0;
}

.image-ul {
  list-style-type: none;
  padding: 0;
  margin-right: 15px;
}

li {
  list-style-position: inside;
}

<div class="parent">
  <div class="images">
    <ul class="image-ul">
      <li><img src="https://i.imgur.com/kGKLgnu.png" />
      </li>
      <li><img src="https://i.imgur.com/kGKLgnu.png" />
      </li>
    </ul>
  </div>
  <div class="content">
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph
      of text. This is a paragraph of text. This is a paragraph of text.</p>
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <ul>
      <li>This is a list of items.</li>
      <li>This is a list of items.</li>
      <li>This is a list of items.</li>
      <li>This is a list of items.</li>
      <li>This is a list of items.</li>
      <li>This is a list of items.</li>
    </ul>
  </div>
</div>

That doesn't quite get me what I want. The elements in the content div don't align with the left side of the page if they're fully below the images. — Bri Bri, Nov 24 '20 at 22:17
What do you mean? You need to be more clear in your expectation. — disinfor, Nov 24 '20 at 22:25
I edited my question and added an illustration of the sort of result I want. — Bri Bri, Nov 24 '20 at 22:33
@GuyGizmo based on your updated illustration, you can't do what you want with your current markup. CSS is not content aware, so it doesn't know if it's the `p` or `ul` content. And since the `p` and `ul` are in a completely different parent element than the images, you will not get what you want. — disinfor, Nov 24 '20 at 22:37

Zia Ahmad · Answer 3 · 2020-11-24T22:37:05.897

Just add display:flex to .parent class and remove float from .images and it will work fine. Also, make sure you study about flex, float is not a good practice.

Some basics about flexbox: https://www.w3schools.com/css/css3_flexbox.asp

.parent {
  border: 1px solid green;
  display:flex;
}

.images {
  border: 1px solid blue;
}

.content {
  border: 1px solid red;
}

.content:before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 0;
}

.image-ul {
  list-style-type: none;
  padding: 0;
  margin-right: 15px;
}

li {
  list-style-position: inside;
}

<div class="parent">
  <div class="images">
  <ul class="image-ul">
    <li><img src="https://i.imgur.com/kGKLgnu.png"/>
    </li>
    <li><img src="https://i.imgur.com/kGKLgnu.png"/>
    </li>
   </ul>
  </div>  
  <div class="content">
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <p>This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.</p>
    <ul>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    </ul>
  </div>
</div>
<div>
    <ul>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    <li>This is a list of items.</li>
    </ul>
</div>

This doesn't quite get me what I want. I'm looking for any element that falls completely below the images to take up the full width of the page. I've edited my question to include an illustration of this. — Bri Bri, Nov 24 '20 at 22:35
ok i understand, what you need to do is, the elements that you want in 2 coloums, like your `.parent div`, anything that you want to be on right side of image, add it in `.parent div` and content that you want to take full width of the page, create a new `div` and put content inside that. see my answer again and run the code, you will understand — Zia Ahmad, Nov 24 '20 at 22:38
I see what you're getting at, but I don't want it to be predetermined which elements are in the column next to the images and which are below it. I'm trying to have each element is fully either in the right column or taking up the full width of the page, depending on whether it falls below the images given the page width. So, for example, if the user shrinks the page width, any element that was previously to the right of the images but now falls below them will change to take up the whole page width. — Bri Bri, Nov 24 '20 at 22:49
i am not being rude but you need to learn more about html, css. cuz from what i see you dont have knowledge about css techniques like flex, grid and media queries. You need to learn all these and then you wont be needing anyone's help. I hope that makes sense to you. Currently, someone can make you the layout u need but you should be able to make those by yourself. Best of luck! — Zia Ahmad, Nov 25 '20 at 00:01

With floating images, can paragraphs or divs remain in the same column in their entirety?

3 Answers3