CODEWITHSUNDEEP
csscss-float
Slava
Slava

Reputation: 3107

CSS: Float inline-blocks around single block element on more than one line

screenshot

What I need is to float both red elements on the side of the green one, stacked directly one above the other, in such a manner that the outer block will respect the total width of green + longest red.

Output needed:

enter image description here

Here is the fiddle: http://jsfiddle.net/r71bapbn/1/

So far HTML:

<div>
    <label>
        <span class="icon"></span>
        <span class="text1">Some text</span><br />
        <span class="text2">Some other text</span>
    </label>
</div>

CSS:

div {
    display:inline-block;
}
label {
    display:inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
}
span {
    display:inline-block;
    background:rgba(255, 200, 200, 1);
    white-space:nowrap;
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}

Upvotes: 1

Views: 1573

Answers (5)

Slava
Slava

Reputation: 3107

Alternative to float

I've encountered a lot of problems using float because it takes floated element out of the normal document flow. Thanks to the ideas provided in other answers here, I've managed to create this layout in the alternative way, without floating elements.

HTML (note how span tags are placed directly to each other on purpose): 

<div>
    <label>
        <span class="icon"></span><span class="group">
            <span class="text1">Some text</span><span class="text2">Some other text</span>
        </span>
    </label>
    <label>
        <span class="icon"></span><span class="group">
            <span class="text1">Some longer text</span><span class="text2">Some other longer text</span>
        </span>
    </label>
</div>

CSS:

div {
    display:inline-block;
}
label {
    display:block;
    white-space:nowrap;
    background:rgba(230, 230, 255, 1);
    padding:10px;
}
.icon {
    vertical-align:top;
    display: inline-block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
}
.group{
    border:1px solid red;
}
.icon, .group{
    vertical-align: top;
    display: inline-block;    
}
.text1, .text2 {
   background:rgba(255, 200, 200, 1);
   display:block;
}

Fiddle:

http://jsfiddle.net/r71bapbn/21/

I recommend this technique if you want the parent element to properly respect the size of child elements.

Good luck!

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

Remove the inline-block from the span and add width to label:

div {
    display:inline-block;
}
label {
    display:inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
    width: 140px;
}
span {
    background:rgba(255, 200, 200, 1);
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1 {

}
.text2 {

}

demo

Updated:

Normally we group the elements which we have to float like below html:

<div>
    <label>
        <span class="icon"></span><!--this would be floated-->
        <spa class="group"><!--this would be floated-->
        <span class="text1">Some text</span><br />
        <span class="text2">Some other text</span>
        </span>
    </label>
</div>

And here is the demo

But be sure to clear the floats like using overflow:hidden to parent element i.e. label.

Upvotes: 1

Jay
Jay

Reputation: 792

Set the icon width to a percentage, then also set the text to a percentage (adding upto 100% of course). And remove the line break. Fiddle Below

http://jsfiddle.net/q35wffht/

html;

<div>
    <div class="left">
        <span class="icon"></span>
    </div>
    <div class="right">
        <span class="text1">Some text</span><br/>
        <span class="text2">Some other text</span>
    </div>

css; 

    div {
    display:inline-block;
}
.left {
    width: 40px;
    float: left;
}
.right {
    width: auto;
    float: left;
}
span {
    display:inline-block;
    background:rgba(255, 200, 200, 1);
    white-space:nowrap;
}
.icon {
    display:block;
    width:100%;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1 {
float: left;
    max-width: 100%;
    width: auto;
}
.text2 {
   float: left;
    max-width: 100%;
    width: auto;
}

Upvotes: 0

KesaVan
KesaVan

Reputation: 1031

I Hope this Code will Help You.

Here is Your DEMO

CSS

div {
    display:inline-block;
    width: 100%;
}
label {
    display:inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
    width: 140px;
}
span {
    display:flex;
    background:rgba(255, 200, 200, 1);
    white-space:nowrap;
    margin-bottom: 3px;
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1 {
width: 65px;    
}
.text2 {

}

HTML

<div>
    <label><div>
        <span class="icon"></span>
        <span class="text1">Some text</span>
        <span class="text2">Some other text</span></div>
    </label>
</div>

Upvotes: 1

Pierre Le Bot
Pierre Le Bot

Reputation: 334

  • Remove <br>
  • Add overflow: auto
  • Remove white-space: nowrap
  • Add to .text1 and .text2 a margin-left of the .icon's width

HTML

<div>
    <label>
        <span class="icon"></span>
        <span class="text1">Some text</span>
        <span class="text2">Some other text</span>
    </label>
</div>

CSS

label {
    display: inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
    overflow: auto;
}
span {
    display:block;
    background:rgba(255, 200, 200, 1);
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1, .text2 {
    margin-left: 40px;
}

Fiddle forked here : http://jsfiddle.net/f5h5vx06/

Upvotes: 3

Related Questions