0

I have a div which is floated to the left. To the right of that, I have a <ul class='nav nav-tabs'>.

If I float the nav list to the left, it looks fine except that the bottom border of the list only extends beneath the nav options. How do I get it to extend across the remaining portion of the screen? (i.e. all the way to the right).

If I don't float the list to the left, the tabs stay in the right place but the bottom border fits to 100% of the view port and moves to below the left nav.

Here's the JS fiddle: http://jsfiddle.net/kimprince/TCEPE/

Thanks!

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
DatsunBing
  • 8,684
  • 17
  • 87
  • 172

2 Answers2

2

Instead of floating the right column to the left, add overflow:hidden (or auto) to trigger a new block formatting context.

This effectively causes the right column to take up the remaining horizontal space.

You can find a thorough explanation about how this works here 

#right-col
{
  overflow:hidden;
}

FIDDLE

Community
  • 1
  • 1
Danield
  • 121,619
  • 37
  • 226
  • 255
1

Hi didn't quite understand use col- class like col-lg-4 don't add your own floats if you can avoid it use class pul-left for floating it left or pull right for floating it right

also to get the head links of bootstrap to work in online editors like mine click the icon next to the word HTML.

http://codepen.io/CarraraWebsiteSolutions/pen/JFebh

user2814461
  • 37
  • 2
  • 8