Guest User

Untitled

a guest
Jan 19th, 2019
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.44 KB | None | 0 0
  1. <div class = "container">
  2. <div class = "fixed">
  3. I'm 150px wide! Glee is awesome!
  4. </div>
  5. <div class = "fluid">
  6. I'm fluid! Glee is awesome!
  7. </div>
  8. <div class = "fixed">
  9. I'm 150px wide! Glee is awesome!
  10. </div>
  11. </div>
  12.  
  13. html, body {
  14. height: 100%;
  15. }
  16. .container {
  17. display: table;
  18. width: 100%;
  19. height: 100%;
  20. }
  21. .container > div {
  22. display: table-cell;
  23. }
  24. .fixed {
  25. width: 150px; /*or whatever you want*/
  26. }
  27. .fluid {
  28. /*yep, nothing*/
  29. }
  30.  
  31. var thisWidth = ($(window).width()) - 220 - 140;
  32. $('.center').css("width", thisWidth);​
  33.  
  34. var left = $(".left").width();
  35. var right = $(".right").width();
  36. var main = $(".wrapper").width();
  37. var setwidth = main - right - left;
  38. $('.center').css("width", setwidth);
  39.  
  40. <div class = "container">
  41. <div class = "fixed first">
  42. I'm the first fixed
  43. </div>
  44. <div class = "fluid">
  45. I'm fluid!
  46. </div>
  47. <div class = "fixed last">
  48. I'm the last fixed
  49. </div>
  50. </div>
  51.  
  52. html, body {
  53. height: 100%;
  54. font-family: 'Arial', 'Helvetica', Sans-Serif;
  55. }
  56. .container {
  57. display: table;
  58. width: 100%;
  59. height: 100%;
  60. }
  61. .container > div {
  62. text-align: center;
  63. float:left;
  64. }
  65. .fixed {
  66. background: rgb(34, 177, 77);
  67. color: white;
  68. width:150px;
  69. position:relative;
  70. }
  71. .fluid {
  72. background: rgb(0, 162, 232);
  73. float:left;
  74. width:100%;
  75. margin-left:-150px;
  76. margin-right:-150px;
  77. }
Add Comment
Please, Sign In to add comment