Floating the block to the right, then take full width after the float

I have the following situation where I need a list on the right to use only the remaining space until it passes the content on the left, after which it can get full width again.

I can do it with hardcoding a margin-left: 50%

for the first few <li>

, but this is inadequate since I don't know the size of the div to wrap around the text.

.intro {
    width: 50%;
    float: left;
}

li {
    display: block;
    height: 50px;
    border: 1px solid black;
}
      

<div class="intro">Some text and stuff and text and maybe some more text and donuts let play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
      

Run codeHide result


+3


source to share


3 answers


I am assuming you want the contents of the list items to be adjacent to the floating content. You can do this using regular div

s. Not sure why you are using the ul

and tags li

.

FAUX solution:

Fiddle: http://jsfiddle.net/jebgerp8/ .

HTML:

<div class="intro">
    Some text and stuff and text and maybe some more text and donuts let play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping
    </div>
<div class = "li">
    <img src = "http://placehold.it/50x50" />
</div>
<div class = "li">
    <img src = "http://placehold.it/50x50/ff0000" />
</div>
<div class = "li">Another "list item"</div>
<div class = "li">Fourth "list item"</div>
<div class = "li">Last "list item"</div>

      

CSS



.intro {
    width: 50%;
    float: left;
    border: 2px dashed #bbb;
}

.li {
    height: 50px;
    margin: 2px 0;
}

.li:nth-last-of-type(-n + 3) {
    border: 1px solid #000;
}

      

TRUE adjustable solution via Flexbox (modern browser required).

Fiddle: http://jsfiddle.net/148y1b18/

CSS



.intro {
    width: 50%;
    float: left;
    border: 2px dashed #bbb;
}

.li {
    height: 50px;
    display: flex;
    border: 1px solid #000;
}

.li + .li {
    margin-top: 2px;
}

      

0


source


add this:

.list {
    width:50%;
    float:right;
}

      

Demonstration:



.intro {
    width: 50%;
    float: left;
}

.list {
  width:50%;
  float:right;
}

li {
    display: block;
    height: 50px;
    border: 1px solid black;
}
      

<div class="intro">Some text and stuff and text and maybe some more text and donuts let play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
      

Run codeHide result


0


source


I'm not sure what you were trying to do with the black border, but if I have a little more information I could probably help a little more with that.

Part of the problem that you are facing is that you left yours. before whether. Take a look at your css above. It didn't accept the items you specified.

check out this js script. I think this is what you are looking for, perhaps outside the border.

http://jsfiddle.net/j9pekyje/

<p class="intro">Some text and stuff and text and maybe some more text and donuts let play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</p>

        <ul>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
        </ul>

.intro {
    width: 50%;
    float: left;
}
.list {
    width:50%;
    float:right;
}
.li {
    display: block;
    height: 50px;
    border: 1px solid black;
}

      

Just think it over. You can probably run into some problems that add up to 100% with or without field specification or padding, since this is usually additive. Something to be aware of in the future. Hope this helps you.

0


source







All Articles