horizontal mages with float:left step align

  • Famous

    (@famous)


    14 years, 3 months ago

    I floated images left in a div within a page and for some reason they step and do not line up horizontally. Like below:

    image
    ……….image2
    …………………image3
    …………………………..image4

    Instead they should be like so:

    image image2 image3 image4

    This is my code:

    .cimages
{
	display:inline-block;
	float:left;
	background:rgb(252,252,252);
	height:106px;
	width:801px;
}

.cimages img
{
	width:92px;
	height:92px;
	float:left;
	margin:7px 14px;
	border:rgb(129,129,129) 2px solid;
	background:#fff;
border-radius:7px;
}

Viewing 5 replies - 1 through 5 (of 5 total)
  • deepbevel

    (@deepbevel)

    14 years, 3 months ago

    image height 97px with a top and bottom margin totalling 21px puts the required space for each image at 118px. That’s if my math serves me right.
    If so,looks like your space for the images is only 97px, so maybe it’s forcing them out?

    Thread Starter Famous

    (@famous)

    14 years, 3 months ago

    It should line up fine with exactly the correct height

    [please don’t bump]

    Michael

    (@alchymyth)

    14 years, 3 months ago

    please post a live link to the problem – just by looking at the css, there is no way anybody could help you.

    there could be added paragraph tags or br tags or …….

    generally, for formatting problems, try to use a tool such as Firebug http://getfirebug.com/ to investigate the involved css and html structure.

    Thread Starter Famous

    (@famous)

    14 years, 3 months ago

    So it turns out you’re a pretty smart guy @alchymyth. You mentioned br tags or other code. I was pretty positive that it wasn’t CSS, but I didn’t consider br tags. Anyways there are br tags after checking (view source) in there, however I work in the html editor and they do not show up oddly enough. So I went into the visual editor and there was one element for each line. So I backspaced and low and behold it lifted each element to the same line correcting the problem. Does anyone know why the br tags aren’t showing in html view? I wonder if that has been a problem?

    Thanks @alchymyth

    deepbevel

    (@deepbevel)

    14 years, 3 months ago

    The html editor wraps images in p and br tags by default, But it took the sweeper to realize that could be your issue.. he’s real good like that.

    many use this plugin to get around it.
    http://ww.wp.xz.cn/extend/plugins/raw-html/

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘horizontal mages with float:left step align’ is closed to new replies.