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         lt div class  container-fluid  gt     lt div class  row-fluid  gt       lt div class  offset1 span8 pull-right  gt          Widget 1         lt  div gt        lt div class  offset1 span8 pull-left  style  bottom 0   gt          Widget 2         lt  div gt            a lot of content          lt  div gt    lt  div gt  lt  --  fluid-container-- gt    I have this as a result      Moving Widget 2 down also does not help    lt div class  container-fluid  gt     lt div class  row-fluid  gt       lt div class  offset1 span8 pull-right  gt            Widget 1         lt  div gt             a lot of content          lt div class  span8 pull-left  style  bottom 0 margin-left  0   gt            Widget 2        lt  div gt     lt  div gt   lt  div gt  lt  --  fluid-container-- gt      Any ideas how to do that without dirty hacks  for example I could use JavaScript to fix Widget2 position    Or  ok  ok  with them

User · Answer

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.

User · Answer

From all I have read you cannot do exactly what you want without javascript  If you float left before text   lt div style  float left   gt widget lt  div gt  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   lt div style  float left   gt widget lt  div gt    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   lt div style  float left   gt widget lt  div gt  lt div style  clear both   gt  lt  div gt    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      lt div class  container-fluid  gt     lt div class  row-fluid  gt       lt div class  offset1 span8 pull-right  gt          Widget 1         lt  div gt           a lot of content           lt div class  span8  style  margin-left  0   gt          Widget 2         lt  div gt       lt  div gt    lt  div gt  lt  --  fluid-container-- gt

[html] Floating divs in Bootstrap layout

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to css-float