CODEWITHSUNDEEP
htmlcsscss-float
Quinton Pike
Quinton Pike

Reputation: 3861

CSS - Float to max width

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>

Upvotes: 3

Views: 9850

Answers (2)

SiriusKoder
SiriusKoder

Reputation: 341

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;
}

Upvotes: 0

animuson
animuson

Reputation: 54729

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.

Upvotes: 3

Related Questions