CSS - Float to max width

Question

So I am making a row of items in a semi elastic container. There is a profile image on the left, and then content floated to the right of it (both float left).

What I am trying to do is make the content float be max possible width instead of min possible width (as floating causes).

CSS:

#container {
   max-width: 800px;
   min-width: 500px;
}
.profile {
   float: left;
   width: 100px;
}
.info {
   float: left:
   min-width: 400px;
   max-width: 700px;
}

HTML:

<div id="container">
    <div class="profile">
        IMG
    </div>
    <div class="info">
        INFO
    </div>
</div>

So, you want info div to only vary from 400px to 700px wide? — Ayush
– Ayush, Commented Nov 16, 2011 at 4:59

animuson · Accepted Answer · 2011-11-16 04:58:18Z

3

It doesn't make much sense to float something when you want it to expand to fill the parent. Just remove the float: left and the width properties from the .info division so that it will expand to fill the width of the parent and then add a margin-left: 100px to push it out from under the one that is still floated to the left.

answered Nov 16, 2011 at 4:58

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quinton Pike Over a year ago

I think I will end up doing that, I was just curious if there was a way to have them both float and have it expand as much as possible.

SiriusKoder · Accepted Answer · 2011-11-16 05:06:48Z

0

if you are floating any element you have to give its parent element, clear:both, overflow: hidden;.

#container {
width: 800px;
clear: both;
overflow: hidden;
}

.profile {
   float: left;
   width: 100px;
}
.info {
   float: left:
   min-width: 400px;
   max-width: 700px;
}

answered Nov 16, 2011 at 5:06

SiriusKoder

3412 gold badges4 silver badges12 bronze badges

Collectives™ on Stack Overflow

CSS - Float to max width

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related