CODEWITHSUNDEEP
htmlcsscss-float
dvlden
dvlden

Reputation: 2462

float and auto height

I have a couple of classes there so let me post them first.

HTML:

<div class="content">
    <div class="sidebar">

    </div>

    <div class="area">

    </div>
</div><!-- content closed -->

CSS:

.content {
    background-color: #eee;
    height: auto;
}

.sidebar {
    background-color: #555;
    width: 250px;
    height: auto;
    padding: 10px;
    float: right;
}

.area {
    background-color: #777;
    width: 590px;
    height: auto;
    padding: 10px;
}

So, you can basically see that every single class have height set on "auto". Thats good cause I want content to follow sidebar and area. And they will have plenty of content inside of them.

Now... .sidebar is set on float:right; so it doesnt really affect to move the content that stands below. Which is footer in my case.

I am wondering how to make the object thats floating, to move the parts that are below of it, depending on auto set height.

Upvotes: 1

Views: 91

Answers (1)

stephen.hanson
stephen.hanson

Reputation: 9624

I'm not sure I understand your question, but if you are trying to position footer underneath your content that is floated right, you need to clear the float:

<div class="content">
    <div class="sidebar">

    </div>

    <div class="area">

    </div>
    <div style="clear:both"></div>
    This is the footer
</div><!-- content closed -->

Jsfiddle: http://jsfiddle.net/xmw7M/1/

Upvotes: 1

Related Questions