CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
DatsunBing
DatsunBing

Reputation: 9076

Twitter Bootstrap 3: Nav Should Take up Remainder of Screen Width

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!

Upvotes: 0

Views: 279

Answers (2)

Danield
Danield

Reputation: 125443

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

Upvotes: 2

user2814461
user2814461

Reputation: 37

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

Upvotes: 1

Related Questions