Clearing element

HTML & CSS
1

Hi everyone,

In the code below there’s a p tag that holds a date. If the image above it is at least 820 pixels then the p tag below it is correctly positioned below the image and to the left of the H1.

The problem is that if the image is half that size then the p tag containing the date jumps up and is positioned to the left of the image. I tried to use clear: right on the image which didn’t help. I also tried clear: both on the p tag but this didn’t do anything either.

Can anyone tell me how to keep the p tag below the image and to the left of the h1 using inline css?

<div class="booking-detail"> 

     <img src="/image.jpg" style="text-align: left; height: 275px; clear: right;" />

    <aside>
        <p style="border: 0px; clear: both" class="pretty-date">{tag_Event Date}</p>
    </aside>
</div>
<h1 class="event_title" style="font-size: 32px; padding: 15px 0px 20px;">event name</h1>

Would really appreciate any advice.

Thanks

2

The clear property is used to clear floated elements. If the image is not floated, it will not be cleared, it remains an in-line element by default.
But I am not seeing the behaviour you describe. The p nested in the aside will be block elements and create their new line after the img.
Is there some additional css we don’t see in your post? I’m guessing there is since you are using classes as well as the inline styling.

3

Thanks for the reply,

The image itself is set to display: inline-block so could that be causing the issue?

4

It must be something else. aside and p are block elements, so should by default be on a new line, not inline with the img. If I re-create your code, that is exactly what happens, there is nothing to make the aside be inline with the img.
You must have some other css elsewhere which is causing the issue.
Do you have a link to a live page, or an additional css file?
Here you will see it displays as expected:-

5

gwnh,

If you do not wish to post a link to your site, then post a “working page” that demonstrates the problem so we can see the same thing that you see and troubleshoot it.

Selected snippits of code that do not demonstrate the problem just cause extra work and frustration.

A “working page” starts with <!doctype>, contains the code that demonstrates the issue, ends with </html>

6

Sorry for the delay. I just had another look at the code and the aside is set to float left. So with this new information, is there any way to solve the problem?

7

The reason why it’s floating left is so that it’s to the left of the H1 below it but as I explained it seems to be jumping up to the left of the image if the image width is not wide enough.

8

The obvious thing is remove the float, but if you need the float then make the img display: block so it has its own line.

9

Thanks for the advice. Making the image display block fixed the problem but I can now no longer have it centered. Maybe that’s why it was set to inline block originally. Is there a workaround for this?

10

Does the image have a width on it? Put margin:auto; on it. If it doesn’t, then make it display:table; instead of display:block; and add margin:auto;.

11

Since there’s no width then I used display table and added the margin auto and it works well which is great. Do you know which is the earliest browser that supports display: table?

12

No, but it’s old enough not to worry about.

13

You’re good.

14

Ok great - thanks so much for the help.

15

IE7 does not support it, anything after that does.

16

I’m pretty sure that an ie7 audience would be limited so I don’t think I’ll worry. Thanks again

1 Like
17

You mean for the 6 users globally? It would break.

To give you perspective on how little IE7 is cared about, my work only supports IE11 and edge. A company that makes websites and wants it to look good for almost everybody…only supports IE11 and edge.

Going back 4 versions is just…yeah don’t worry about IE7. Your entire page probably breaks in IE7, not just from display;table.

2 Likes
18

Microsoft don’t even provide security patches for IE10 any more (except on the one server operating system they still support that doesn’t support IE11.

IE10 and earlier can therefore be considered to be security holes rather than browsers.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.