Css float next to HR-Line

I want a Text with an vertical line below it, right to this constellation i want a floating div. I dont want to set fixed widths. What i tried is this:

<div>
    huhu
    <hr class="green" />
    <div style="float: right">right</div>
</div>

what i want is the text+hr flow around the red box, is this possible?

Answers


This is possible; however, the code you've given won't work without a small modification.

You need to have the right-floating div before the content that you want to wrap around it -- http://jsfiddle.net/S9mmU/1/

To ensure that the floated div never takes up more than half the screen, you can use the max-width property - max-width:50%;

<div>
    <div style="float: right; max-width:50%; border:2px solid red; padding:2em; margin:1em;">right</div>
    huhu
    <hr class="green" />
</div>

I've added the red border, a margin, and some padding so that you can see the effect. It should go without saying that none of these should be inline styles in practice.


Need Your Help

Why isn't Google Chrome reloading my scripts?

javascript html google-chrome

So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!

Wordpress Header Image Mobile CSS Issue

css wordpress image mobile

Working on the following site and can't get the header to resize in mobile properly: http://tinyurl.com/mrveubj

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.