Is there any way I can force a floated div to shrink instead of going to a new line?
I know I can set implicit widths on the divs but it's on a menu which might have variable amounts of items in it. I'm trying to do this while keeping the site's layout fluid if possible.
#left {
float: left;
border: 1px solid #000;
}
#right {
float: right;
border: 1px solid #000;
}
<div id="left">
<p>This div represents the logo</p>
</div>
<div id="right">
<p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
</p>
</div>
Basically, I want #right to begin shrinking when the browser window is shrunk rather than having it drop a line first, then shrink when the window is further resized.
Set height and width to 100% for the bottom div and set overflow auto on the bottom div as well. Now the div will not move up to fill space.
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Save this answer.
It is an inline-level element and does not break to the next line unless its default behavior is changed.
Alternative way to do this is to use the display:inline-block . Where row element has white-space:nowrap. inline-block makes the element inline but preserves the settings such as width, height, top and bottom margins, paddings.
Have you tried experimenting with giving these two divs relative (such as a percentage) widths?
When you float without explicitly declaring a width, either fixed or relative, the dimensions will default to 'auto'. Auto will force the div to be the width of it's content. When the browser shrinks, the content will still force these boxes to that width, until it is forced to collapse by touching another element.
Using auto widths is not the best way to achieve fluidity in your layout. You'll need to specify some kind of relative dimension somewhere, otherwise this problem will be entirely unavoidable.
There are lots of resources out there which can help you achieve a more fluid layout (a lot of articles on www.alistapart.com discuss this in quite some depth).
CSS's display
property, set it to inline
and the div
will behave like a span
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With