Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Making Div Relative To Other Content On A Page

Post a Comment
I am having a very minor issue but i have been trying to fix it for few hours with no luck at all. I have a simple page that uses bootstrap. Following is the screenshot. In this s

Solution 1:

do not copy, learn how it works by looking at this example

This absolute not the correct way but give you a small idea!

Any questions ?? comment away! :)

#searchPage-small-title {
  color: rgba(128, 128, 128, 1);
  font-size: 16px;
  font-family: "Open Sans";
  text-align: center;
  font-weight: 700;
}
#searchPage-title {
  color: rgba(128, 128, 128, 1);
  font-size: 50px;
  font-family: "Open Sans";
  text-align: center;
}
.searchPage-box {
  text-align: center;
}
.searchPage-input {
  width: 80%;
  border-style: solid;
  border-radius: 6px;
  border-color: rgba(192, 189, 178, 1);
  height: 59px;
  font-size: 18px;
  text-indent: 32px;
}
.fa-star {
  color: rgba(220, 118, 28, 1);
}
#searchPage-favorites-title {
  color: rgba(128, 128, 128, 1);
  font-size: 18px;
  font-family: "Open Sans";
  text-align: center;
  font-weight: 400;
  margin-top: 40px;
  margin-bottom: 30px;
}
.searchPage-favorites-item {
  color: rgba(128, 128, 128, 1);
  font-size: 20px;
  font-family: "Open Sans";
  display: inline-block;
  text-align: center;
  font-weight: 800;
  padding-top: 30px;
  height: 115px;
  width: 140px;
  border: 1px solid #444;
  margin: auto 0;
}
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="container-fluid"><!--row I--><divclass="row bg-success"style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;"><divclass="col-lg-1">&nbsp;</div><divclass="col-lg-10"><divid="searchPage-small-title">NBA</div></div><divclass="col-lg-1">&nbsp;</div></div><!--row II--><divclass="row bg-success"style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;"><divclass="col-lg-1">&nbsp;</div><divclass="col-lg-10"><divid="searchPage-title">Player Portal</div></div><divclass="col-lg-1">&nbsp;</div></div><!-- row III --><divclass="row"style="background-color: #eeede7; padding-bottom:100px;"><divclass="col-lg-12"><divclass="searchPage-box"><formrole="form"class="form"ng-submit="submit()"><divclass="form-group"><inputtype="text"class="searchPage-input"autocomplete="off"ng-model="selected"placeholder="Search Player"typeahead="sponsor as label(sponsor) for sponsor in sponsorList
                          | filter:$viewValue | limitTo:12"typeahead-editable="true"typeahead-min-length="2"required=""name="sponsorName"></div></form></div></div></div><!-- row IV --><divclass="row bg-warning"style="background-color: #eeede7; padding-bottom:100px;"><divclass="col-lg-1">&nbsp;</div><divclass="col-lg-10"><divid="searchPage-favorites-title">FAVORITES</div></div><divclass="col-lg-1">&nbsp;</div></div><!-- row V --><divclass="row"style="background-color: #eeede7; padding-bottom:100px; text-align: center;"><divclass="col-lg-4 searchPage-favorites-item"><iclass="fa fa-star">Jordan</i></div><divclass="col-lg-4 searchPage-favorites-item"><iclass="fa fa-star">Lebron</i></div><divclass="col-lg-4 searchPage-favorites-item"><iclass="fa fa-star">Curry</i></div></div></div>

Edit:

The following div have the class col-lg-4 meaning the width if the available space will be 33,333333%. Also the first child of this div has text-left class. If you adjust col-lg-4 to col-lg-12 and the first child with text-left to text-center you will have the desire result.

Edit: and alter the next css:

.searchPage-box {
    /* padding-left: 590px; remove */width: 100%;
    margin-bottom: 60px;
    border-radius: 0000;
}

(from http://www.bootply.com/zYFA6mqMO1)

<div class="col-lg-4">  
        <divclass="searchPage-box text-left"><formrole="form"class="form-inline"ng-submit="submit()"><divclass="form-group"><divclass="row"><divclass="col-lg-4"><inputtype="text"class="searchPage-input"autocomplete="off"ng-model="selected"placeholder="Search Player"typeahead="sponsor as label(sponsor) for sponsor in sponsorList
                          | filter:$viewValue | limitTo:12"typeahead-editable="true"typeahead-min-length="2"required=""name="sponsorName"></div><divclass="col-md-1"><!-- using Bootstrap default for button --></div></div></div></form></div></div>

Solution 2:

Not at my computer now, so I will have to answer more fully in a bit, but one thing that jumps out to me: instead of having empty divs with bootstrap columns, use offsets; for example, col-lg-offset-1.

EDIT: Expanding my answer.

Here is a link to my forked version of your Bootply, showing my changes. The following is a small portion of the bootply:

<divclass="row"><divclass="col-xs-10 col-xs-offset-1"><divid="searchPage-small-title">NBA</div></div></div><divclass="row"><divclass="col-xs-10 col-xs-offset-1"><divid="searchPage-title">Player Portal</div></div></div>

Yuri's answer does a pretty good job of explaining the issues you're coming up against. If you're going to use Bootstrap, in general, you need to only use Bootstrap's layout classes to set your layout - adding custom positions and other things like that can really mess with the page, as you've seen.

I won't go into a detailed explanation of the changes I made, in the hopes that you can have a look and figure out what makes it work, but I do have some notes:

First, rather than lg, it's better to define at least an xs behavior, and work your way up to bigger screens. By only defining col-lg-x classes for most of your items, you're not defining a responsive layout for viewports below that size.

Second, there were a couple places where you had row classes nested directly inside other row classes. This can also cause issues. The intended method of use is 

<divclass="row"><divclass="col-xs-x"><!-- if you need to define another grid inside the above div,
          start another row --><divclass="row"></div></div></div>

Third, as I mentioned in my initial response, rather than adding empty divs with column classes (which will be collapsed automatically), use col-{size}-offset-x classes on the first div in the row (in addition to the regular col-{size}-x class). Also, related to alignment: rather than using text-align: center, you can just add bootstrap's text-center class to what you want to center.

The only issue in my version is that the favorites box overlap on a small screen - this is because of their defined size. I'll leave that to you to fix.

I hope this answer helped you, and please let me know if you have any questions about my answer.

Solution 3:

Heres what you should note:

.searchPage-box {padding-left: 590px}

Using padding-left and setting pixels is a bad idea, because when the screen size does change, pixels don't auto change. So if you want to center it, try this:

margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 30%!important;

Those go under

.searchPage-box

Hope I helped :)

Solution 4:

Your div around the search bar this one: uses your css class searchPage-box, that one is using padding left 590px

.searchPage-box {
  padding-left: 590px;
  width: 100%;
  margin-bottom: 60px;
  border-radius: 0000;
}

This cause 590px to the left of the search bar to be unused.

Solution 5: 

<divclass="container-fluid"><divclass="row bg-success"style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;"><divclass="row"><divclass="col-lg-10 col-lg-push-1"><divid="searchPage-small-title">NBA</div></div></div><divclass="row"><divclass="col-lg-1"></div><divclass="col-lg-10"><divid="searchPage-title">Player Portal</div></div></div><!-- change in code is here -->

    **<divclass="row"><divclass="col-lg-6 col-md-6 col-sm-4 col-md-offset-2 col-lg-offset-3 col-sm-offset-1 text-left">**


            <formrole="form"class="form-inline"ng-submit="submit()"><divclass="form-group"><divclass="row"><divclass="col-lg-4"><inputtype="text"class="searchPage-input"autocomplete="off"ng-model="selected"placeholder="Search Player"typeahead="sponsor as label(sponsor) for sponsor in sponsorList
                          | filter:$viewValue | limitTo:12"typeahead-editable="true"typeahead-min-length="2"required=""name="sponsorName"></div><divclass="col-md-1"><!-- using Bootstrap default for button --></div></div></div></form></div></div><!--  </div>  --></div><divclass="row bg-warning"style="background-color: #eeede7; padding-bottom:100px;"><divclass="row"><divclass="col-lg-1"></div><divclass="col-lg-10"><divid="searchPage-favorites-title"class="row">FAVORITES</div></div></div><divclass="row"><divclass="col-sm-4"></div><!-- this favorites are hard-coded for now for purposes of demo --><divclass="col-sm-2 searchPage-favorites-item"><iclass="fa fa-star"></i>
        Jordan
      </div><divclass="col-sm-2 searchPage-favorites-item"><iclass="fa fa-star"></i>
        Lebron
      </div><divclass="col-sm-2 searchPage-favorites-item"><iclass="fa fa-star"></i>
        Curry
      </div></div></div></div>

Post a Comment for "Making Div Relative To Other Content On A Page"