CODEWITHSUNDEEP
htmlcss
webdad3
webdad3

Reputation: 9080

css div taking up whole screen

I have the following fiddle that when you run it shows a red border that indicates my div that is in question. Really I want my div to be under the 2 divs above it that are on the right and left sides.

The div in question is this:

    <div id="Tabs" role="tabpanel" style=" position:relative; width:100%; border:1px solid red;">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#sqlOutput" aria-controls="sqlOutput" role="tab" data-toggle="tab">"U or R" Table Scripts</a></li>
            <li><a href="#sqlCRUD" aria-controls="sqlCRUD" role="tab" data-toggle="tab">"U or R" Table CRUD</a></li>
            <li><a href="#sqlETable" aria-controls="sqlETable" role="tab" data-toggle="tab">"E" Table Scripts</a></li>
            <li><a href="#xTableInserts" aria-controls="xtablecrud" role="tab" data-toggle="tab">"X" Table Scripts</a></li>
            <li><a href="#JSONDATA" aria-controls="JSONDATA" role="tab" data-toggle="tab">JSON DATA</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content" style="padding-top: 20px; overflow:auto;">
            <div role="tabpanel" class="tab-pane active" id="sqlOutput" ng-bind-html="sqlOutput  | unsafe" style="height:200px; overflow:auto;"></div>
            <div role="tabpanel" class="tab-pane" id="sqlCRUD" ng-bind-html="sqlCRUD  | unsafe" style="height:200px; overflow:auto;"></div>
            <div role="tabpanel" class="tab-pane active" id="sqlETable" ng-bind-html="sqlETable  | unsafe" style="height:200px; overflow:auto;"></div>
            <div role="tabpanel" class="tab-pane active" id="xTableInserts" ng-bind-html="xTableInserts  | unsafe" style="height:200px; overflow:auto;"></div>
            <div role="tabpanel" class="tab-pane active" id="JSONDATA" ng-bind-html="JSONDATA  | unsafe" style="height:200px; overflow:auto;"></div>
        </div>
    </div>

Please advise on what I need to change? You may notice in my fiddle that there are duplicate body instructions. I have the dashboard.css (bootstrap theme) and the bootstrap.css combined there.

Upvotes: 0

Views: 66

Answers (1)

user5870539
user5870539

Reputation:

You need to clear the floated elements. In this case you can use a <div class="clearfix"></div> between the two columns and your red div. I suggest using the bootstrap grid though.

https://jsfiddle.net/1bzpaLfd/1/

Upvotes: 3

Related Questions