Home/ Questions/Q 6724277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:40:13+00:00

I have the following code: <!DOCTYPE html> <html lang=tr> <head> <meta charset=utf-8> <title>Bootstrap</title> <!–

  • 0

I have the following code:

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap</title>

    <!-- Le styles -->
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">

    <body>
      <div class="container">

      <!-- Le content -->
      <div class="row">
        <div class="container-fluid">
          <div class="sidebar" style="border:1px solid #000">
            <img style="padding:5px 0px 0px 5px;" src="http://placehold.it/200x300" alt="">
          </div>
          <div class="content" style="border:1px solid #000">
            <ul class="tabs" data-tabs="tabs">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages</a></li>
              <li><a href="#">Settings</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            <div class="tab-content">
              <div class="active" id="home">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum tortor sapien. Vestibulum risus nunc, elementum id adipiscing eu, dictum eu ipsum. Aliquam ac ligula lacus. Mauris eleifend eleifend magna, ut tincidunt leo consequat quis.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

I used inline styles because i am only testing. There is a huge space between tabs and content. What causes this and how to fix?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove the clear:both declaration at .tab-content, by adding the following code after your <link rel=..> element:

      <style>
    .tab-content {
      clear: none;
    }
  </style>

    Also, don’t forget to add the closing </head> tag. Fiddle: http://jsfiddle.net/gAJ2T/

    • 0