CODEWITHSUNDEEP
csshtmlcss-float
Drathier
Drathier

Reputation: 14539

Floated divs inside centered div, how do i do?

I have a centered div on a website, in which I need to float two divs. The left one is of constant width but the right one changes width and needs to be a constant distance from the right side of the centered parent div.

non-working example:

http://jsfiddle.net/aZx4e/

EDIT

I have tried all your examples but the contained items still floats to the left/right of the site, way outside of the parent div :(

Upvotes: 0

Views: 216

Answers (2)

Dave
Dave

Reputation: 6189

<div style="width:250px; text-align: left; margin-left: auto; margin-right: auto; border: solid 2px;">
    <div style="float:left;">
        constant width
    </div>
    <div style="float:right; padding-right:20px;">
        dynamic width
    </div>
    <div style="clear:both;"></div>
</div>

Added the padding-right style. Change the 100px to what you want your constant distance from the right edge of the parent div to be. I also added an empty div w/clear:both. This is important when floating to ensure other parts of your document aren't accidentally floated, which can occur in IE. You should get in the habit of adding a clear div as the last sibling of any elements you float.

Upvotes: 0

Rudie
Rudie

Reputation: 53881

How about this? http://jsfiddle.net/rudiedirkx/aZx4e/3/

Upvotes: 2

Related Questions