Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Can You Make Floated Elements In A Div Not Wrap?

Post a Comment
(The target browser is IE8) I have a div that contains a list of elements floated left. The elements width can change at runtime. I'd like to make it so that if they longer fit in

Solution 1:

You can do that easily by adding another block element around the floated ones, with high width and overflow set to hidden. Also, you'll need to set overflow:hidden to the original parent container.

Note that if the width of the floated elements exceed the width of the new block element mentioned above, they will wrap again. So I recommend a high value for that.

EDIT: I see you have a div with an ul and some li's inside. So you don't have to add a new element, since the ul is also a block element and it is already there.

Here is your code with some corrections:

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml" ><head><title></title><styletype="text/css">div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D91px solid; }
        div.aclb:hover {border:#3399FF1px solid;}
        div.aclb.focus {background:#FFF; border:#3399FF1px solid;}
        div.aclbul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }
        div.aclbli {float:left; cursor:default; font-family:Arial; padding:0; margin:0; height:18px;} /*Setting Height here is important. Seems li can have a height>18px on some browsers*/div.aclbli.block {padding:0px2px; height:16px; white-space:nowrap; border:solid 1px#BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}
        div.aclbli.block:hover {border:solid 1px#5F8BD3; background:#E4ECF8; color:#000;}

        div.aclbinput {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none}
        div.aclbinput:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}

        div.aclba.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px01px4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center;  line-height:10px;}
        div.aclba.d:hover { border:solid 1px#7DA2CE; background:#F7FAFD; color:#AD0B0B;}
        div.aclba.d:active {border:solid 1px#497CBB; background:#BAD8E8; color:#A90909;}
    </style></head><body><divstyle="width:250px; overflow: hidden;"class="aclb"><ulstyle="width: 1000px; overflow: hidden;"><liclass="block"><aclass="d">x</a><span>Item 1</span></li><liclass="input"><inputtype="text"style="width:300px"maxlength="30"/></li></ul></div></body></html>

I hope it will work for you. :)

Solution 2:

overflow:hidden on the parent container should do the trick.

Solution 3:

Could you use "nowrap"? probably just for text mind you

Solution 4:

It seems like you're looking for this sort of behaviour, no?

div.aclb {
    overflow: hidden;
}
div.aclbul {
    white-space: nowrap;
}
div.aclbli {
    display: inline;
}

Post a Comment for "Can You Make Floated Elements In A Div Not Wrap?"