Floats nested within inline-block

Hi, the idea is to position text vertically within a floated div with unknown height. Ive found a solution (wrapping the floats with a inline-block) and it works fine. The problem is that im trying to do flip the floats per each parent div (p_hold).

Using javascript i add a class of .even to each alternative div.

CSS

[code].p_hold {
width: 100%;
margin: 0 auto;
height:auto;
background-color: #FFF;
}
.p_hold > div { /* Float wrappers */
display: inline-block;
vertical-align: middle;
width: 50%;
}

.pimgb{ float: right;
width:100%;
height:auto;
background-color: #F99;}
.ptextb{float: left;
width:100%;
background-color: #3FF;}
.even .pimgb {float: left;}
.even .ptextb {float: right;}
.pimgc img{width:100%;
height:auto;
}

.pimgb img{width:100%; height:auto;}
.clearer { clear: both;}[/code]

HTML

[code]

test text
test text
[/code]

Although in the browser inspector the .even changes left to right float (and via versa), both ‘p_hold’ and ‘p_hold even’ child divs act in the same manner. Any ideas?

Thanks in advance

That won’t work because the float is confined to the parent and won;t float to the right of the whole row.

You would need to change the html on each row to achieve what you want.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:table;
	width:100%;
	max-width:960px;
	margin:auto;
	border-spacing:5px;
}
.row {display:table-row}
.cell {
	display:table-cell;
	vertical-align:middle;
	padding:5px;
	width:50%;
}
.wrap img {
	width:100%;
	height:auto;
}
.wrap p {
	margin:10px;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="row">
    <div class="cell"> <img src="http://lorempixel.com/400/200/"></div>
    <p class="text cell">Lorem ispum dolor sit amet dolor site amet lorem adispicing elit.</p>
  </div>
  <div class="row">
    <p class="text cell">Lorem ispum dolor sit amet dolor site amet lorem adispicing elit.</p>
    <div class="cell"> <img src="http://lorempixel.com/300/300/"></div>
  </div>
  <div class="row">
    <div class="cell"> <img src="http://lorempixel.com/200/150/"> </div>
    <p class="text cell">Lorem ispum dolor sit amet dolor site amet lorem adispicing elit.</p>
  </div>
</div>
</body>
</html>

If you want to do it automatically you could use flexbox and nth-child to do it and not have to change the html at all.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:960px;
	margin:auto;
}
.row {display:flex;align-items:center;}
.cell {flex:1 0 50%;}
.wrap img {
	width:100%;
	height:auto;
}
.row:nth-child(even){flex-direction:row-reverse}
.wrap p{margin:0;padding:5px;}

</style>
</head>

<body>
<div class="wrap">
  <div class="row">
    <div class="cell"> <img src="http://lorempixel.com/400/200/"></div>
    <p class="text cell">Lorem ispum dolor sit amet dolor site amet lorem adispicing elit.</p>
  </div>
  <div class="row">
    <div class="cell"> <img src="http://lorempixel.com/300/300/"></div>
    <p class="text cell">Lorem ispum dolor sit amet dolor site amet lorem adispicing elit.</p>

  </div>
  <div class="row">
    <div class="cell"> <img src="http://lorempixel.com/200/150/"> </div>
    <p class="text cell">Lorem ispum dolor sit amet dolor site amet lorem adispicing elit.</p>
  </div>
</div>
</body>
</html>

Thanks Paul

Unfortunately the content is dynamic, therefore i wont be able to change the div structure. Flexbox works great, the down side is the never ending thorn of IE, however it doesn’t fail too drastically. Can you think of another way, rather than flexbox? :slight_smile:

What version of IE are you concerned about?

If you add display:inline-block to the flexitem then browsers that don;t understand flexbox will get all the images on the left and all the text on the right but still vertically aligned.

.cell {flex:1 0 50%;}
.cell {/* fallback */
  display:inline-block;
  width:49%;
  vertical-align:middle;
}

I’ve updated the demo above with this code.

As Ron mentions IE11 and edge is fine with this code and if you use prefixes ie10 should work.

Flexbox now has about 96% of browser support in its non-prefixed form which is why I prefer the standards version and avoid the prefix.

1 Like

Thanks Paul, the prefix works now in IE (float left) (i have ver 9 (just for testing as it seems most of my customers’ clients still use XP )).

Next step :slight_smile: , for the even cell, how do i change the text cell to text-align:right (obviously leaving the default text alignment for IE)

Thanks a lot (ill leave you alone a bit after this )

XP can’t run version 9 - it is limited to version 8.

<ot>

Unless your customer controls a network on which he supplies the O/S, I don’t believe that statement. Even pretending that it’s true, users of WinXP are not limited to IE8 (asserted because ownership of WinXP seems to presume one will use IE8).

Suggest that your customer support his [marketeer’s] claim with data :smiling_imp: .

I can tell you first-hand that Chrome no longer supports WinXP and several other “essential-to-me” applications no longer support WinXP… they won’t install. You and your customer are expending time and money supporting a dying horse.

One of you has to be sensible about the marketing value of IE8 users. I do not for one minute believe that the ROI is there.

my

</ot>

1 Like

HI, sorry for late return to this…one thing i cant work out using flex, how do i reset the css that when i use @media screen so that i can have both columns at 100% and ultimately hide the image cell?

Ive messed around for ages, but cant get it to work.

Thanks in advance

To turn flex off just reset the display to whatever you want it to be.

Find wherever you have set the display property with a value of flex and change that display to whatever you want (usually block).

e.g.

.row {display:flex;align-items:center;}

@media screen and (max-width:760px){
.row {display:block;}
}

All child items will no longer be flex containers and any flex child properties will be ignored (unless they have been set to display:flex).

ah, cheers…i was messing around with the actual .cell rather than the parent .row…ta very much

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