html - Divs are not floating left -

-

i have form , container div. container div looks this:

container

.container {   margin-left: auto;   margin-right: auto;   width: 500px;

and inside container have divs classes of panel:

panel

.panel {   width: 50%;   float: left;

but reason the panel not floating end of it's container?

here full html

html

<div class="container"> <%= form_with(model: fee_change_submission, local: true) |form| %>   <div class="panel">     <%= form.label :account_name, class: "panel__top-label" %>     <%= form.text_field :account_name, class: "panel__top-input" %>   </div>    <div class="panel">   <%= form.label :account_number, class: "panel__top-label" %>   <%= form.text_field :account_number, class: "panel__top-input" %>   </div> <% end %> </div>

css

.container {       margin-left: auto;       margin-right: auto;       width: 500px;        h1 {         text-align: left;         padding-bottom: 10px;         margin-bottom: 20px;         border-bottom: 1px solid #ddd;       }        // forms       form {         .panel {           width: 50%;           float: left;            &__top-input {             width: 100%;             text-align: left;           }            &__top-label {             width: 100%;             text-align: left;             color: $gray-color;           }            .btn {             width: 100px;           }         }       }     }

screenshot:

enter image description here

here picture of problem. can see, have set width to 50% it's not floating left.

there "nothing wrong" css. had remove scss variable , take styles after that, color: $gray-color;. think issue didn't know scss code, or mabye did?

.container {    margin-left: auto;    margin-right: auto;    width: 500px;  }  .container h1 {    text-align: left;    padding-bottom: 10px;    margin-bottom: 20px;    border-bottom: 1px solid #ddd;  }  .container .form .panel {    width: 50%;    float: left;  }  .container .form .panel__top-input {    width: 100%;    text-align: left;  }  .container .form .panel__top-label {    width: 100%;    text-align: left;    color: gray;  }  .container .form .panel .btn {    width: 100px;  }
<div class="container">    <form action="" class="form">      <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>        <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>        <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>        <div class="panel">        <label for="" class="panel__top-label" />        <input type="text" class="panel__top-input" />      </div>    </form>  </div>

this edited scss

.container {   margin-left: auto;   margin-right: auto;   width: 500px;   h1 {     text-align: left;     padding-bottom: 10px;     margin-bottom: 20px;     border-bottom: 1px solid #ddd;   }   .form {     .panel {       width: 50%;       float: left;       &__top-input {         width: 100%;         text-align: left;       }       &__top-label {         width: 100%;         text-align: left;         color: gray; // change       }       .btn {         width: 100px;       }     }   } }

Comments

Post a Comment

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

-
Image
so code works fine logger riddled message. there way rid of or suppress it? postannotation.swift class postannotation: mkpointannotation { //mark: properties let post: post //mark: initialization init(post: post) { self.post = post super.init() self.coordinate = cllocationcoordinate2d(latitude: post.latitude, longitude: post.longitude) self.title = post.title self.subtitle = post.timestring() } } adding annotation let annotation = postannotation(post: post) self.map.addannotation(annotation) func mapview func mapview(_ mapview: mkmapview, viewfor annotation: mkannotation) -> mkannotationview? { if annotation mkuserlocation { return nil } var annotationview = mapview.dequeuereusableannotationview(withidentifier: "pin") as? mkpinannotationview if annotationview == nil { annotationview = mkpinannotationview(annotation: annotation, reuseidentifier: "pin")
Read more

ZeroMQ on Windows, with Qt Creator -

-
i have installed zmq link given below on windows 7. http://zeromq.org/distro:microsoft-windows 1) have c++ project in qt-creator , i'm using zmq c++ binding (zhelpers.hpp etc). 2) have added .lib installed zmq folder qtcreator 3) while compiling, compiler looks _imp__zmq_verion, in .dll files present in .lib have __imp_zmq_version. 4) causing undefined reference zmq_version. anyone else faced problem , has solution ?
Read more

unity3d - Unity SceneManager.LoadScene quits application -

-
i have 2 different scenes 1 named 'main' , other 'game' both added scenes in load. when use scenemanager.loadscene("game"); works no problem when tried return main scene code if (input.getkeydown (keycode.escape)) { scenemanager.loadscene("main"); } strangely game quits. thanks. sorry interruption. somewhere on other script found code. if (input.getkeydown (keycode.escape)) { application.quit (); } that's bad, know...
Read more