By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,567 Members | 1,592 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,567 IT Pros & Developers. It's quick & easy.

How to create side-by-side boxes inside another box?

P: 19
Hello,

I want to create three side-by-side boxes inside a much larger box. I have this code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="mystyle.css" />
  4. </head>
  5.  
  6. <body>
  7. <div style="width:100%; ">
  8.   <div id ="wrapper" >
  9.     <p class="headerStyle" > Online Movie Database </p>
  10.   </div>
  11.  
  12.   <div style="background-color:black;height:800px;width:20%;float:left;  ">
  13.   </br>
  14.  
  15.   </div>
  16.  
  17.   </div>
  18.  
  19.  
  20.   <div style="background-color:#E6E6E6;height:800px;width:60%; float:left;   ">
  21.  
  22.    Movie Recommendations
  23.    <div class ="textBox2">
  24.  
  25.     <div class ="textBox" style="float:left;">
  26.     </div> 
  27.      <div class ="textBox" style="float:left;">
  28.     </div> 
  29.     <div class ="textBox" style="float:right;  ">
  30.     </div>
  31.  
  32.  
  33.     </div>
  34.  
  35.   </div>
My CSS file is:

Expand|Select|Wrap|Line Numbers
  1. h1
  2. {
  3.  
  4. text-align: center;
  5. font: italic bold 350% 'Times New Roman';
  6. color: olive;
  7. }
  8.  
  9. .enter
  10. {
  11.  
  12. height:50px;
  13. width:1100px;
  14. }
  15.  
  16. .header
  17. {
  18. background-color:#610B0B;
  19. width:1350px;
  20. height:50px;
  21. }
  22.  
  23. .headerStyle
  24. {
  25. font-size:40px;
  26. font-family: Monotype Corsiva;
  27. text-align: center;
  28. font-weight:bold;
  29. font-weight:italic;
  30. color:silver; 
  31. padding-top:25px;
  32. padding-bottom:25px;
  33. padding-right:50px;
  34. padding-left:50px;
  35. border:2px solid gray;
  36.  
  37. }
  38. #wrapper
  39. {
  40. width:100%; 
  41. height:100px; 
  42. background-color:yellow;
  43. margin:0 auto;
  44. background-repeat:repeat-x;
  45. background-image:url('heading-tube-blue-bkg.jpg');
  46.  
  47. }
  48.  
  49. .textBox
  50. {
  51. background:color:black;
  52. width:220px;
  53. height:200px;
  54. padding:5px;
  55. border:1px solid gray;
  56. margin:15px;
  57.  
  58. }
  59.  
  60. .textBox2
  61. {
  62. width:780px;
  63. height:280px;
  64. padding:5px;
  65. border:0.5px solid gray;
  66. margin:5px;
  67.  
  68.  
  69. }
  70.  
  71. .SearchBox
  72. {
  73. height:25px;
  74. }
The code is not putting the third box correctly inside. Could anyone please help?
Apr 19 '11 #1

✓ answered by JKing

The boxes are too large to fit in the space.

The true width of the box will be the width + padding + margin. So the effective width of your boxes is 220px + 10px + 30px = 260px.

Tweak your margin and padding and it should be fine.

Share this Question
Share on Google+
2 Replies


JKing
Expert 100+
P: 1,206
The boxes are too large to fit in the space.

The true width of the box will be the width + padding + margin. So the effective width of your boxes is 220px + 10px + 30px = 260px.

Tweak your margin and padding and it should be fine.
Apr 19 '11 #2

P: 19
Thanks a lot, I changed the pixels and its working now!
Apr 19 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.