CODEWITHSUNDEEP
htmlcss
Jake Kwon
Jake Kwon

Reputation: 45

Align three divs horizontally using modal (CSS, html)

I'm trying to align three divs horizontally but facing some problems. I'm doing this to build some modals. Thanks!

html code

<div id="modal-wrapper">
  <div class="modal-body"></div>
  <div class="modal-body-2"></div>
  <div class="modal-body-3"></div>
</div>

css code

    .modal-body{
        float:left;
        width: 100%;
    }
    .modal-body-2{
        margin-left: 100%;
        width:100%;
        padding: 15px;
    }
    .modal-body-3{
        margin-left: 200%;
        width:100%;
        padding: 15px;
    }
    #modal-wrapper{
        display: inline-block;
        width: 100%;
        margin: 0 auto;
    }

Upvotes: 2

Views: 115

Answers (1)

Henry Zhu
Henry Zhu

Reputation: 2618

Here is a JSFiddle I made: http://jsfiddle.net/5m1n8p0q/1/. You're spacing each element the entire width of a page. With a 3 div layout, you want just 1/3 or 33% of the width. I placed a padding-right property of 0.5px to mitigate the gap between a 33% and 33.33...% width.
HTML:

  <div class="modal-body">asdf</div>
  <div class="modal-body-2">asdf</div>
  <div class="modal-body-3">asdf</div>

CSS

.modal-body{
    float:left;
    width: 33.3%;
    background: red;
}
.modal-body-2{
    display: inline-block;
    width: 33.3%;
    background: blue;
}
.modal-body-3{
    float: right;
    width: 33.3%;
    background: green;
    padding-right: 0.5px;
}

Upvotes: 2

Related Questions