Avatar billede madseksperten Nybegynder
11. februar 2016 - 22:13 Der er 3 kommentarer og
1 løsning

Contentområdet hopper ned

Hejsa

Er der nogle der kan se hvorfor mit content område hele tiden hopper ned her, hver gang jeg tilføjer en select i højre side?

http://spic.dk/index.php?view=3891455225115

HTML:

<div id="page-content-wrapper bg-info">
            <div class="container-fluid bg-warning">
                <div class="row">
                    <div class="col-lg-10 bg-danger">
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                        <h4>Home</h4>
                    </div>

                    <div class="col-lg-2 rightsidebar">
                        <h3>test</h3>
                            <div class="form-group">
                                <label for="selectbuilding">Building</label>
                                  <select class="form-control input-sm" name="choosebuilding">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                  </select>
                            </div>
                            <br/><hr>
                            <div class="form-group">
                                <label for="selectappartment">Appartment</label>
                                  <select class="form-control input-sm" name="chooseappartment">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                  </select>
                            </div>
                            <br/><hr>
                            <div class="form-group">
                                <label for="selectpeople">People</label>
                                  <select class="form-control input-sm" name="choosepeople">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                  </select>
                            </div>
                    </div>
                    <!-- / rightsidebar -->

                        <div class="col-lg-1" id="throw_1" style="list-style:none; padding: 4px 0px 0px 0px;">
                            <div class="fixed-width-col border">

                            </div>
                        </div>

                        <div class="col-lg-6 bg-success" id="content">Content</div>

                        <div class="col-lg-1 bg-warning" id="throw_2" style="list-style:none; padding: 4px 0px 0px 0px;">
                            <div class="fixed-width-col street">

                            </div>
                        </div>

                        <div class="col-lg-1 bg-warning" id="throw_3" style="list-style:none; padding: 4px 0px 0px 0px;">
                            <div class="fixed-width-col number">

                            </div>
                        </div>

                        <div class="col-lg-1 bg-warning" id="throw_4" style="list-style:none; padding: 4px 0px 0px 0px;">
                            <div class="fixed-width-col border">

                            </div>
                        </div>
                </div>
                <!-- /Row -->
            </div>
            <!-- /Container -->
        </div>
        <!-- /Page Content Wrapper -->
    </div>
    <!-- /Wrapper -->


CSS:

/* Backgroundcolor on right sidebar*/
.rightsidebar {
  background-color: black;
}


/* hrows.css */
.fixed-width-col{
  position: relative;
  display: block;
  margin: 0 auto;
  width: 65px;
  height: 100%;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
}

.street {
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #fe5606 0%, #fd9a00 100%);
    border-image-slice: 1;
box-sizing: border-box;
}

.number {
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3a4ed5 0%, #3acfd5 100%);
    border-image-slice: 1;
box-sizing: border-box;
}

.border {
  border: 2px solid #FFECB3;
  box-sizing: border-box;
}
#throw_1 {
  height: 500px;
  font-size: 13px;
}

#throw_2 {
  height: 330px;
  font-size: 13px;
  border: 2px solid transparent;
}

#throw_3 {
  height: 330px;
  font-size: 13px;
    border: 2px solid transparent;
}

#throw_4 {
  height: 500px;
  font-size: 13px;
}
Avatar billede vandrefuglen Juniormester
12. februar 2016 - 11:29 #1
Et hurtigt fix er at smide "pull-right" på din sidebar fx.

<div class="col-lg-2 rightsidebar pull-right">
Avatar billede madseksperten Nybegynder
12. februar 2016 - 11:57 #2
vildt, det virker sku. Har siddet med det jeg ved ikke hvor mange timer. Hvad betyder det pull-right?
Avatar billede madseksperten Nybegynder
12. februar 2016 - 11:59 #3
Ligger du iøvrigt et svar? mvh Mads
Avatar billede vandrefuglen Juniormester
12. februar 2016 - 12:08 #4
Pull-right betyder blot at den skal trække elementet til højre. Der findes også en Pull-left.

Men koden bør kunne skrives mere optimal &#9786; sådan at det ikke er nødvendigt at floate  elementer.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester