Css - Don't want elements below my floated element

Question

I have a floated div with "sidebar" text. Its parent container has text as well.
I don't want to have text below my floated "sidebar" div:

example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png

How can I fix this?

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

Answer 1

If it doesn’t mess up anything else, you can use overflow: hidden or overflow: auto to fix this:

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <div class="next-to-float" style="overflow: hidden;">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

See http://jsfiddle.net/pauldwaite/YL5P3/

I’ve written about this more fully here, including code to make it work in IE 6: xHTML/CSS: How to make inner div get 100% width minus another div width

I still don’t really understand the reasoning behind why overflow: hidden does this, but I understand that it does follow from the CSS spec.

Answer 2

Set right margin on non-floated element

JSFiddle

The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.

How it works?

1. We have floated element on the right with width = X
2. We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.

And that's it.

Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.

<div id="parent">
    <div id="floated">Foo bar</div>
    <div id="content">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

And CSS:

#floated
{
    float: right;
    padding: 1em;
    background: #ccc;
    width: 10em;
}

#content
{
    margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}

Why is this solution better than setting main content width?

Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.

And a small advice

Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.

Answer 3

its easy simply add width in [P] tag see here

example

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <h2>Foo</h2>
    <p style=" width: 500px; ">Text!</p>
</div>

for example your ( id="parent" ) have 800px width

and (id="floated") right-side bar have 200px width

then make your [P] 800px - 200px = 600px

so set your [P] width to 600px

---------- or

if you want some space between text and bar make [P] width 580px

it means 20px for space

Answer 4

You can nest 2 div tags inside the container. Float them both and resize them as you need them to be.

Answer 5

Set a bottom margin on the floated element that equals the length of the remainder. Or add a width to the larger element and float it the other direction.

<div id="parent">
    <div id="floated" style="width:200px; float:right">Foo bar</div>
    <div id="content" style="width:600px; float:left">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

OR

<div id="parent">
    <div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>