1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to place boxes side by side

Discussion in 'CSS' started by Seupoj, Nov 6, 2013.

  1. #1
    Hello
    I was just messing up with bootstrap so i just wanted to know how to place these boxes side by side here is an image [​IMG]
    Here is the source code
    HTML:
    1. div.heh
    2. {
    3. width:550px;
    4. height:200px;
    5. border:1px solid black;
    6. background-color: #f5f5f5;
    7.   border: .5px solid #e3e3e3;
    8.   border-radius: 1px;
    9.   padding: 19px;
    10.   margin-bottom: 5px;
    11.   min-height: 10px;
    12.     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    13.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    14. box-align:left
    15. float:left;
    16. }
    17. div.hehh
    18. {
    19. width:550px;
    20. height:200px;
    21. border:1px solid black;
    22. background-color: #f5f5f5;
    23.   border: .5px solid #e3e3e3;
    24.   border-radius: 1px;
    25.   padding: 19px;
    26.   margin-bottom: 5px;
    27.   min-height: 10px;
    28.     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    29.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    30. box-align:right
    31. float:right;
    32. }
    33.  
    34. <!------- here is the HTML Structure ----->
    35.   <div class="heh" align="left">
    36.         <h3>SteamRep:<button type="button" class="btn btn-default"  >Normal</button><br>
    37.         <a href="http://backpack.tf/id/712">View Backpack</a><br>
    38.         <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
    39.         </h3>
    40.       </div>
    41.       <div class="hehh">
    42.       <h3>Positive Reputation:<font color="green">100</font><br>
    43.       Negative Reputation:<font color="red">1</font></br>
    44.       Total Raffles Participated:<font color="green">12</font><br>
    45.       Warnings Received:<font color="red">0</font><br>      
    46.      
    47.       </h3>    
    48.       </div>
    49.  
    Some help would be really appreciated
    Thanks!
    Seupoj, Nov 6, 2013 IP
  2. Megamon

    Megamon Member

    Messages:
    66
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    Digital Goods:
    1
    #2
    you could use float:left; on divs.
    Megamon, Nov 7, 2013 IP
  3. Bogdanel

    Bogdanel Active Member

    Messages:
    77
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    65
    #3
    also you will need to consider removing from width the padding and the margin, if you have a container with fixed width.
    Bogdanel, Nov 8, 2013 IP
  4. Md.Ibrahim Hossain

    Md.Ibrahim Hossain Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    i think you use position or float=left, and check margin
    Md.Ibrahim Hossain, Nov 8, 2013 IP
  5. Pudge1

    Pudge1 Active Member

    Messages:
    877
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    70
    #5
    Try using display: inline; and float: left;
    Pudge1, Nov 8, 2013 IP
  6. qwikad.com

    qwikad.com Well-Known Member Affiliate Manager

    Messages:
    1,928
    Likes Received:
    238
    Best Answers:
    1
    Trophy Points:
    140
    #6
    It may sound archaic, but you can always use <tables> to place boxes side by side. One thing I like about <tables> is that they are stretchable. Give it a try:

    Code (Text):
    1.  
    2.  
    3. <table border="0" width="800">
    4. <tr>
    5. <td valign="top">
    6.  
    7.     <div class="heh">
    8.       <h3>SteamRep:<button type="button" class="btn btn-default" >Normal</button><br>
    9.       <a href="http://backpack.tf/id/712">View Backpack</a><br>
    10.       <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
    11.       </h3>
    12.     </div>
    13.  
    14. </td>
    15. <td valign="top">
    16.  
    17.     <div class="hehh">
    18.       <h3>Positive Reputation:<font color="green">100</font><br>
    19.       Negative Reputation:<font color="red">1</font></br>
    20.       Total Raffles Participated:<font color="green">12</font><br>
    21.       Warnings Received:<font color="red">0</font><br>    
    22.       </h3>  
    23.     </div>
    24.  
    25. </td>
    26. </tr>
    27. </table>
    28.  
    29.  
    You can change the width to whatever you want.
    qwikad.com, Nov 8, 2013 IP
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #7
    I would just have more questions than answers for you -- like this is 2013, not 1997 so why are you using the FONT tag? Where's the FORM for that BUTTON? Why are you designing a crappy inaccessible fixed width? Why are you trying to use the long deprecated ALIGN attribute? What makes any of those third level headings? Are you sure you even have H2 for those to be subsections of and a h1 for the h2 to be subsections of? Why are you trying to fix the height in pixels of an element with flow text in it?

    A double wrapped floated first div and a dynamic second div can handle this quite easily. First let's drag the markup kicking and screaming into THIS century...

    Code (Text):
    1. <div class="controlWrapper"><div class="controls">
    2.         SteamRep:
    3.         <!-- really think this button should be an anchor... -->
    4.         <button type="button">Normal</button><br />
    5.         <a href="http://backpack.tf/id/712">View Backpack</a><br />
    6.         <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
    7. <!-- .controls, .controlWrapper --></div></div>
    8.  
    9. <div class="info">
    10.     <table>
    11.         <tr>
    12.             <th scope="row">Positive Reputation:</th>
    13.             <td>100</td>
    14.         </tr><tr>
    15.             <th scope="row">Negative Reputation:</th>
    16.             <td>1</td>
    17.         </tr><tr>
    18.             <th scope="row">Total Raffles Participated:</th>
    19.             <td>12</td>
    20.         </tr><tr>
    21.             <th scope="row">Warnings Received:</th>
    22.             <td>0</td>
    23.         </tr>
    24.     </table>
    25. <!-- .info --></div>
    Double-wrapper for properly divided dynamic width, get rid of the headings since those weren't actually headings (suspect you were choosing tags based on appearance instead of meaning, which is choosing the wrong tags for the wrong reasons), switch that tabular data to a table for semantic reasons and so there's a logical relationship between the elements, wrapper around that table since they don't accept border-radius or box-shadow properly...

    Then for CSS we float .contentWrapper at 50% width with a 0.25em right margin... we then margin .controls on the same side so we get 0.5em space between the two columns. (sneaky trick for perfect 50% dynamic width). .info doesn't get floated, and instead gets a de-indent prevention behavior on it making it auto-adjust to whatever space is available. (which works out to 50% minus that 0.25em right margin on .controlWrapper).

    ... and for the alternating colors, we just use nth-child. IE 8/earlier doesn't get the colors, OH WELL! You REALLY want that, just put classes on every other TD.

    Code (Text):
    1. .controlWrapper {
    2.     float:left;
    3.     display:inline; /* prevent IE float oddities */
    4.     width:50%;
    5.     margin:0 0.25em 0.5em;
    6. }
    7.  
    8. .info {
    9.     overflow:hidden; /* prevent float de-indent */
    10.     zoom:1; /* trip haslayout, prevent float de-indent IE7- */
    11.     margin-bottom:0.5em;
    12. }
    13.  
    14. .controls {
    15.     margin-right:0.25em;
    16. }
    17.  
    18. .controls,
    19. .info {
    20.     padding:1em;
    21.     border:1px solid #EEE;
    22.     background:#F5F5F5;
    23.     margin-bottom:5px;
    24.     -webkit-border-radius:1px;
    25.     border-radius:1px;
    26.     -webkit-box-shadow:
    27.         inset 0 1px 1px rgba(0, 0, 0, 0.05);
    28.     box-shadow:
    29.         inset 0 1px 1px rgba(0, 0, 0, 0.05);
    30. }
    31.  
    32. .info table {
    33.     border-collapse:collapse;
    34. }
    35.  
    36. .info th {
    37.     text-align:right;
    38.     font-weight:normal;
    39. }
    40.  
    41. .info td {
    42.     color:#0C0;
    43. }
    44.  
    45. .info tr:nth-child(even) td {
    46.     color:#E00;
    47. }
    Now it's fully automatically fluid, so it will fit whatever size container you put it in -- of course if you care about accessibility you won't have an inaccessible fixed outer width and instead have a semi-fluid, elastic and responsive layout... and of course since it's NOT tables for layout, it can also be made responsive with ease.
    deathshadow, Nov 9, 2013 IP
  8. Minakshi Rana

    Minakshi Rana Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    1. <div class ="textBox2">
    2. <div class ="textBox" style="float:left;">
    3. </div>
    4. <div class ="textBox" style="float:left;">
    5. </div>
    6. <div class ="textBox" style="float:right; ">
    7. </div>
    8. </div>
    Last edited: Mar 3, 2014
    Minakshi Rana, Mar 3, 2014 IP
  9. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #9
    Sorry for the post in an old thread. But no one actually answered the question correctly. If you are using Bootstrap why not use the grid?

    Code (Text):
    1.  
    2. <div class="col-md-6">
    3. left box
    4. </div>
    5. <div class="col-md-6">
    6. right box
    7. </div>
    8.  
    HuggyStudios, Mar 3, 2014 IP
  10. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #10
    So in other words, if you're DUMB ENOUGH to be using that bloated halfwit steaming pile of ****, you might as well crap on the accessibility by using grids and fixing the width too?

    STUNNING example of why bootstrap is absolute rubbish I can't fathom how anyone can be big enough a drooling moron to use by choice.
    deathshadow, Mar 3, 2014 IP
  11. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #11
    Your'e DUMB enough not to read what he actually asked. He said he is working with BOOTSTRAP and want's to know how to place boxes side by side.

    STUNNING example of a keyboard warrior not reading the actual topic.
    HuggyStudios, Mar 4, 2014 IP
  12. Imran Shariff

    Imran Shariff Member

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    31
    #12
    I have just re-done you code that will solve the issue. However it seem with the design partner in the image you are using Boostrap.. if you are using bootstrap please let us know which version you are using. Then we can help you in a better way.
    HTML:
    1.   .boxes{margin-bottom: 5px;}
    2.   .boxes .heh {
    3.     display: block;
    4.     float: left;
    5.     width: 550px;
    6.     height: 200px;
    7.     border:1px solid black;
    8.     background-color: #f5f5f5;
    9.     border-radius: 1px;
    10.     padding: 19px;
    11. }
    12.  
    13. <div class="boxes">
    14.   <div class="heh">
    15.     <h3>Box Title One</h3>
    16.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda!</p>
    17.     <a href="http://backpack.tf/id/712">View Backpack</a><br>
    18.     <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
    19.   </div>
    20.   <div class="heh">
    21.     <h3>Box Title Two</h3>
    22.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda!</p>
    23.     <a href="http://backpack.tf/id/712">View Backpack</a><br>
    24.     <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
    25.   </div>
    26. </div>
    Imran Shariff, Mar 4, 2014 IP
  13. muratdniz

    muratdniz Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #13
    <style>
    div.heh
    {
    width:550px;
    height:200px;
    border:1px solid black;
    background-color: #f5f5f5;
    border: .5px solid #e3e3e3;
    border-radius: 1px;
    padding: 19px;
    margin-bottom: 5px;
    min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-align:left
    float:left;
    }
    div.hehh
    {
    width:550px;
    height:200px;
    border:1px solid black;
    background-color: #f5f5f5;
    border: .5px solid #e3e3e3;
    border-radius: 1px;
    padding: 19px;
    margin-bottom: 5px;
    min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-align:right
    float:right;
    }

    </style>
    muratdniz, May 1, 2014 IP
  14. Ricardo Neves

    Ricardo Neves Peon

    Messages:
    29
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    3
    #14
    You can read bootstrap information about it:
    http://getbootstrap.com/examples/grid/

    Works very well with responsive designs.
    Ricardo Neves, May 2, 2014 IP