Category: Design

Height of CSS block containing floats

How to give that block the correct height? Read here.
How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible.

The answer is this: In order for a parent to wrap around children elements which are floated, a new block formatting context needs to be set on the parent. This can be done with:

.wrap {
    display: flow-root;
}

or

.wrap {
    contain: layout;
}

The latter is a bit newer. Either of these have an advantage over overflow: auto; because they have the explicit purpose of creating a new block formatting context, while overflow: auto works as a side effect. Interestingly, flow-root can be also used alongside block or inline for better layout control. For example:

.wrap {
    display: inline flow-root;
}

Read more:

That’s all folks!
Have a nice day…

How to change background-image opacity in CSS without affecting the text

Thank you so much for your quick solution… coder-coder.com

copy-paste

When building a website, you may often want to put a background image on an HTML <div> that also contains text or other content.

And to make the text stand out, you want to change the opacity of that background image in CSS so that it’s semi-transparent. But you’ve tried, and you can’t change the opacity of the background image without also affecting the text or other child elements!

What can you do? Not to worry– this article will give you some practical solutions to controlling your background image opacity.

So, first, the bad news…

Continue reading How to change background-image opacity in CSS without affecting the text

Illustrator Photoshop

Take one:
(and be annoyed by how the outer white ring is just an error in the file)

Add another:

And create!

Yes, you can contact My Brain if this is the kind of work you need to have done.
Have a nice day! 🙂

PS.
And a small note on WordPress; how to remove the default link to the media file when inserting an image? Manually change the image_default_link_type setting (in your database table wp_options) from value “file” to “none”.