CSS: clearing floating image

Gallex · 2018-09-08 11:49:29

how to clear this floating image (fusebox) at the top of a page not to exceed it’s parent container here?

colak · 2018-09-08 13:41:18

This is how I would do it:

<div class="container">
<div class="left"></div>
<img class="floatleft" ... />
<div class="clear">&nbsp;</div>
</div>

and the css

...
.floatleft {float : left;}
.clear {
font-size : .1em;
clear : both;
display : block;
visibility : hidden;
width : 0;
height : 0;
background : inherit;
}

>Edit.   is a legacy from Netscape Navigator which ignores empty divs.

ibadullah · 2018-09-08 14:04:41

page code Error
when i want to past and save the code in the page section in textpattern cms, it give me the following error:
404 Not Found
The requested resource was not found.
Please click here to go to home page
can anyone plz help me in this matter.Thanks

colak · 2018-09-08 14:10:11

Hi ibadullah

can you start a new thread here with your question? Also, could you post your diagnostics in that post?

Gallex · 2018-09-10 07:12:34

colak wrote #313926:

This is how I would do it:

<div class="container">...…

your solution worked for a while. i don’t know what i changed there, but suddenly, it was gone again… :(

colak · 2018-09-10 08:45:39

<div class="intro-img"> should close before and not after the clear div.

Gallex · 2018-09-10 08:58:50

colak wrote #313963:

<div class="intro-img"> should close before and not after the clear div.

still same…

jakob · 2018-09-10 09:01:41

Did you perhaps regenerate the thumbnails? The logo has a lot of whitespace above and below the logo, as if fitted into a square. Maybe that’s the reason why it changed rather than your CSS.

Your section #landing-content.content-1 has a fixed height of 300px, so you could also set .intro-img to a fixed height of say 240px and it shows then within the header and takes account of your padding.

Alternatively use display:flex (or: display: inline-block with revised widths) rather than float for your two divs to ensure they are the same height. You can then also control alignment.

Gallex · 2018-09-10 10:23:18

jakob wrote #313965:

Did you perhaps regenerate the thumbnails?

no

The logo has a lot of whitespace above and below the logo, as if fitted into a square. Maybe that’s the reason why it changed rather than your CSS.

whitespaces are needed.

Your section #landing-content.content-1 has a fixed height of 300px, so you could also set .intro-img to a fixed height of say 240px and it shows then within the header and takes account of your padding.

yes, that way it’s working, but it just would be interested to know, why .intro-img did overflow it’s parent element before?

Textpattern CMS

Textpattern CMS support forum

#1 2018-09-08 11:49:29