Floating divs in Bootstrap layout

Question

I need to do something like this using Boostrap. "Fluid" content on the page with two widgets inside it - first at top-right and second at left-bottom.

Widget1 is easy - I just needed class="pull-right". But what to do with the second one to get it to the bottom of the page keeping "Content" floating around?

style="bottom:0;"does not work: Having this code

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>

    <div class="offset1 span8 pull-left" style="bottom:0;">
    ... Widget 2...
    </div>

    .... a lot of content ....

  </div>

</div><!--/.fluid-container-->

I have this as a result:

Moving Widget 2 down also does not help:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
      ... Widget 1...
    </div>
      .... a lot of content ....
   <div class="span8 pull-left" style="bottom:0;margin-left: 0;">
      ... Widget 2...
   </div>
  </div>
</div><!--/.fluid-container-->

Any ideas how to do that without dirty hacks (for example I could use JavaScript to fix Widget2 position)?

Or (ok, ok) with them?

Solution 1

From all I have read you cannot do exactly what you want without javascript. If you float left before text

<div style="float:left;">widget</div> here is some CONTENT, etc.

Your content wraps as expected. But your widget is in the top left. If you instead put the float after the content

here is some CONTENT, etc. <div style="float:left;">widget</div>

Then your content will wrap the last line to the right of the widget if the last line of content can fit to the right of the widget, otherwise no wrapping is done. To make borders and backgrounds actually include the floated area in the previous example, most people add:

here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>

In your question you are using bootstrap which just adds row-fluid::after { content: ""} which resolves the border/background issue.

Moving your content up will give you the one line wrap : http://jsfiddle.net/jJNPY/34/

  <div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>
    .... a lot of content ....
    <div class="span8" style="margin-left: 0;">
    ... Widget 2...
    </div>


  </div>

</div><!--/.fluid-container-->

Solution 2

I understand that you want the Widget2 sharing the bottom border with the contents div. Try adding

style="position: relative; bottom: 0px"

to your Widget2 tag. Also try:

style="position: absolute; bottom: 0px"

if you want to snap your widget to the bottom of the screen.

I am a little rusty with CSS, perhaps the correct style is "margin-bottom: 0px" instead "bottom: 0px", give it a try. Also the pull-right class seems to add a "float=right" style to the element, and I am not sure how this behaves with "position: relative" and "position: absolute", I would remove it.

Comments

[kostik]

Thanks, but it does not work: dl.dropbox.com/u/4075902/Layout2.jpg. You see, content is not flowing at the right of the widget

[Daniel Moses]

Mine works just fine in the jsfiddle example I posted. You'll need to show me an example that doesn't work in order to fix it.

[Daniel Moses]

Ok, I did some testing and how it decides to wrap text into the bottom right is not always intuitive. It appears that if the last line of text fits into the width to the right of widget2 it will put it there, otherwise it will keep the last line of content above widget2. I will update solution with info.