How to optimize float sizes in CSS?

There has to be a better way

[Lorel]

Is there a way to optimize multiple float sizes in CSS?

I have the following but wondering if there is a better way:


.floatleft150 {
float: left;
width: 150px;
margin:5px; }

.floatright150 {
float: right;
width: 150px;
margin:5px; }

.floatleft130 {
float: left;
width: 130px;
margin:5px; }

.floatright130 {
float: right;
width: 130px;
margin:5px; }

.floatleft120 {
float: left;
width: 125px;
margin:5px; }

.floatright120 {
float: right;
width: 125px;
margin:5px; }

[not2easy]

A floated element will limit its size to the size of its contents (+margin, +padding) normally, you should be able to get the same results without setting any width.

.floatleft {
float: left;
margin:5px; }

.floatright {
float: right;
margin:5px; }

should perform the same function as the individually sized containers. IF they need to be uniformly sized and the contents are not of a uniform size, then you need something else.

[Lorel]

thanks. I'll try it without the width.

[lucy24]

Heh, that sounds like something I've had to do in ebooks when fixed text needs to be aligned just so. But I did it by setting two styles, like

.floatleft {
float: left;
width: 150px;
margin:5px; }

.w180 {width: 180px;}
.w130 {width: 130px;}
.w100 {width: 100px;}

Order of CSS is crucial. The element by itself has a default width-- I set the one that occurs most often-- and then it can be overridden by other specified widths.

A floated element will limit its size to the size of its contents

But only if the content has a width, such as an image. If it's longish text, you wouldn't want to use "auto". The validator currently likes having a "width" attribute-- but it is perfectly happy with "auto", which makes the whole thing pretty pointless ;)

If you have a whole bunch of floats, you may prefer the overall look you get from setting explicit widths. If there are just a few widely spaced images, it wouldn't make a difference. In fact in HTML4 you can use the "align" property on images and ignore the whole float thing, but in HTML5 you're not supposed to.

Experiment with using the padding property (internal to the float) instead of margin (external to the float). This is often more reliable, especially if you're floating a variety of different elements. Inline elements don't generally have margins.

[Lorel]

I forgot to mention I"m using HTML5 (so I need the floats) and RWD with images at 100% with width and height taken out, so there are no widths on the images.

@lucy24 I need margin on the float because most of them are images. Right?

.floatleft {
float:left; }

.w150 {
width:150px; }

.mar12 {margin:12px;}
.mar12l {margin-left:12px;}
.mar12r {margin-right:12px;}

/* px widths will be changed to ems or % for RWD */

---- the html----

<div class="floatleft w150 mar12r">
<img src="…….">
</div>

[Lorel]

PS. I need margin on the items so the text doesn't wrap so tightly around the floated items (usually images)

[not2easy]

As Lucy said:

Experiment with using the padding property (internal to the float) instead of margin (external to the float). This is often more reliable, especially if you're floating a variety of different elements. Inline elements don't generally have margins.

To keep some space around the image it is better to use padding within the image container than margins and yes, if the containers set the image limits you will need to set their size limits.
Be careful of using the px measurement, to have their size adjust relative to the rest of the page you should calculate the percentage (of overall width at desktop size) or else use ems based on your settings. Mobile devices use css pixels and they may not (probably won't) be the same.

[Lorel]

Another thing - I often use a drop shadow under images so if I use padding around the image it will make the drop shadow wider and still not provide white space when floated around text.

I always change px to % or ems for RWD.

[lucy24]

Don't float the image itself. Put the image inside something else-- a div or span, depending on your needs-- and then float that. Once you've got a floating element, you can do anything you like inside it.

Details obviously depend on circumstances. But most of the time, I give floats a padding of 1 em on the bottom and on the exposed side (in a right-floated element, that would be the left side, between the float and the other content). No padding on the top and outside where it simply aligns with everything else.

Does your drop shadow always face the same direction, no matter which side your float is on? Or is it more of an all-around shadow? (I do not want to contemplate drop shadows that point left or right depending on where the image is floated. That would make me seasick :))

[Lorel]

Hi Lucy24


Yes the image is in a div. Sometimes on left and sometimes on right. I posted it above. and the dropshadow is always on right;

<div class="floatleft w150 mar12r">
<img src="……. class="boxshadowimg">
</div>

[not2easy]

Just keep the dropshadow properties on the image, put the padding properties on the container and the image will have the same look it has had. The padding has no effect on the image or drop-shadow, just on the container of the image.

The "w150" width variable needs to add on the amount added by margins and/or padding to actually show the image at w150, otherwise the image will display smaller than intended.

[lucy24]

Depends where the margins and padding are, or how many nests there are within your float.

{width: 150px; margin: 1em; padding: 1em;}

= width of content, exclusive of padding and border, is 150px. (I trip over this every time I'm doing something with a background-image of known width.) If the image itself is 150px and there's a drop shadow, you need to add as many pixels as are taken up by the drop shadow.