Align three boxes in css

Question

I need to align the three boxes in a horizontal position. Also I need to add toggle color of the border of the second box. I am pasting my codes here. My HTML code is

Unordered List

This is a simple list

Second Item
Third Item

            <div class="box2">
                <h2>Button Jquery Demo</h2>
                <p>The background of this box should be set to white on document.ready()</p>
                <p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
                <a href="javascript:void(0);" onclick="alternateColor();">Toggle Color</a>
            </div>
            <div class="box3">
                <h2>Table Example</h2>
                <p>Table rows should include a hover state</p>
                <table>
                  <thead>
                  <div id="col3">
                      <table summary="" border="1" cellspacing="0" cellpadding="3">


                    <tr>
                      <th>Driver</th>
                      <th>Hometown</th>
                      <th>Car</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td>John S.</td>
                      <td>Lincoln, NE</td>
                      <td>55</td>
                    </tr>
                    <tr>
                      <td>Jane D.</td>
                      <td>Omaha, NE</td>
                      <td>24</td>
                    </tr>
                  </tbody>

                  <tfoot>
                    <tr>
                      <td>Mike J.</td>
                      <td>Albany, NY</td>
                      <td>1</td>
                    </tr>
                  </tfoot>
                </table>
</div>

My CSS code is

.box1 {
    background-color: #4b4244;
    width: 300px;
    padding: 25px;
    margin: 25px;
    height: 240px ;
    border-radius: 25px;
    display:inline-block;

}
.box2 {
    margin: auto;
    background-color:white;
    width: 300px;
    padding: 25px;
    height: 240px;
    border-radius: 25px;
    display: inline-block;

}
.box3 {
    position: absolute;
    right: 0px;
    background-color: #4b4244;
    width: 300px;
    padding: 25px;
    margin: 25px;
    height: 240px ;
    border-radius: 25px;
    display: inline-block;

}

http://stackoverflow.com/a/32122011/3597276 – Michael Benjamin Mar 03 '16 at 04:26 — Michael Benjamin, Mar 03 '16 at 04:26
I applied these tricks but nothing is working for it. – ganpat1 Mar 03 '16 at 04:42 — ganpat1, Mar 03 '16 at 04:42
You need to unedit what you just edited. – Satej S Mar 03 '16 at 04:57 — Satej S, Mar 03 '16 at 04:57

symlink · Answer 1 · 2016-03-03T04:57:42.027

2

Use float:left to align your boxes:

jsFiddle

EDIT:

I suspect the floating boxes are throwing your footer off. In that case, wrap your boxes in a containing tag (e.g. main) and give it this :after content:

main:after{
    content:"";
    display:block;
    clear:both;
}

updated fiddle

edited Mar 03 '16 at 04:57

answered Mar 03 '16 at 04:39

symlink

11,984
7
29
50

It works for me but my footer disturbed because of it – ganpat1 Mar 03 '16 at 04:50
I suspect the floats are throwing the layout off. See my update. – symlink Mar 03 '16 at 04:58

score 0 · Answer 2 · answered Mar 03 '16 at 07:53

try with this below code it may help you and look it into full screen

$(document).ready(function(){
    $("a.toggleColor").click(function(){
        $(".box2").toggleClass("border");
    });
});

div.box1,.box2,.box3{
  float : left;
  height: 240px ;
  width: 300px;
  padding: 25px;
  background-color: #4b4244;
  margin : 25px;
  border-radius: 25px;
}

.box2 {
    background-color:white !important;
    border : 1px #4b4244 solid;
}
.border{
  border : 1px red solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
    <h2>Unordered List</h2>
    <p>This is a simple list</p>
    <ul>
        <li>First Item (bold)</li>
        <li>Second Item</li>
        <li>Third Item</li>
        <li>Last Item (underlined)</li>
    </ul>
</div>
<div class="box2">
  <h2>Button Jquery Demo</h2>
  <p>The background of this box should be set to white on document.ready()</p>
  <p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
  <a href="javascript:void(0);" class="toggleColor">Toggle Color</a>
</div>
<div class="box3">
  <h2>Table Example</h2>
  <p>Table rows should include a hover state</p>
  <div id="col3" >
    <table summary="" border="1" cellspacing="0" cellpadding="3">
      <thead>
        <tr>
          <th>Driver</th>
          <th>Hometown</th>
          <th>Car</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>John S.</td>
          <td>Lincoln, NE</td>
          <td>55</td>
        </tr>
        <tr>
          <td>Jane D.</td>
          <td>Omaha, NE</td>
          <td>24</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>Mike J.</td>
          <td>Albany, NY</td>
          <td>1</td>
        </tr>
      </tfoot>
    </table>
  </div>

Align three boxes in css

Unordered List

2 Answers2