Layout 2

Heading h2 - Title - 100% full width

50% width box left

50% width box right

100% width box

50% width box left

50% width box right

100% width box

33% width box left

33% width box center

33% width box right

100% width box

33% width box left

33% width box center

33% width box right

Camgirl Live Editor - Divider

Codes

Want to test the markup codes in Editor tool ? Here are the source markups

HTML markup

<div class="gr-12 myheader tcenter">
     <h2>Heading h2 - Title - 100% full width</h2>
  </div>

<div class="line">
  
  <div class="gr-6 tcenter">
     <p>50% width box left</p>
  </div>
  
   <div class="gr-6 tcenter">
     <p>50% width box right</p>
  </div>
  
</div>

<div class="gr-12 tcenter">
     <p>100% width box</p>
  </div>

<div class="line">
  
  <div class="gr-6 tcenter">
     <p>50% width box left</p>
  </div>
  
   <div class="gr-6 tcenter">
     <p>50% width box right</p>
  </div>
  
</div>

<div class="gr-12 tcenter">
     <p>100% width box</p>
  </div>
  
  
<div class="line">
  
  <div class="gr-4 tcenter">
     <p>33% width box left</p>
  </div>
  
    <div class="gr-4 tcenter">
     <p>33% width box center</p>
  </div>
  
   <div class="gr-4 tcenter">
     <p>33% width box right</p>
  </div>
  
</div>

<div class="gr-12 tcenter">
     <p>100% width box</p>
  </div>
  
  
 <div class="line"> 
  <div class="gr-12 myfooter">
  
  <div class="gr-4 tcenter">
     <p>33% width box left</p>
  </div>
  
    <div class="gr-4 tcenter">
     <p>33% width box center</p>
  </div>
  
   <div class="gr-4 tcenter">
     <p>33% width box right</p>
  </div>
  
  
</div>

</div>
</div>

CSS markup

a:link,a:visited{color:#09C;text-decoration:none;}a:hover{color:#F39;text-decoration:none;}
body{background-color:#f1f1f1; color:#333;font:15px/20px -apple-system, "HelveticaNeue", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;width:100%;margin:0 auto; }.profile_section_content {color:#666666;padding:5px;margin:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 0 #777777;box-shadow:0 0 0 #777777;}.profile_section_background {background-color:transparent;background-color:#;filter:alpha(opacity=100);opacity:1;}.img_radius_shadow {-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:0 0 0 #777777; box-shadow:0 0 0 #777777;}.profile_section_content .heading {padding:5px;background-color:#808080;color:#FFFFFF;font-family:sans-serif;font-weight:normal;font-style:normal;font-size:14px;-webkit-box-shadow:0 0 0 #777777;box-shadow:0 0 0 #777777;-webkit-text-shadow:0 0 0 #777777;text-shadow:0 0 0 #777777;}.content {padding:5px;}.my_mfc_news_feed {width:100%;height:330px;}#about_me_label {display:none;}#avatar_holder,#status_container,#blurb_container,#unix_last_broadcast_container,#unix_last_updated_container {display:none;}#header_bar,#footer_bar,#profile_main_photo,#tags_container,#about_me_label,#cam_score_container,#profile_friends .heading,#friends_container,#profile_header,#profile_about_me > .heading,#username_container,#gender_container,#body_type_container,#ethnicity_container,#hair_container,#eyes_container,#weight_container,#height_container,#age_container,#city_container,#country_container,#sexual_preference_container,#smoke_container,#drink_container,#drugs_container,#marital_status_container,#occupation_container,#school_container,#favorite_food_container,#pets_container,#automobile_container {display:none;}#about_me_container span#about_me_label,#profile_friends .heading,#profile_friends #friends_container,#profile_friends #favorite_models_container,#profile_about_me #tags_container,#profile_schedule,#profile_about_me div#occupation_container {display:none;}#about_me_value{}.xcr::-webkit-scrollbar {width:10px;}.xcr::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);-webkit-border-radius:10px;border-radius:10px;}.xcr::-webkit-scrollbar-thumb {-webkit-border-radius:10px;border-radius:10px;background:#936;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);}.xcr::-webkit-scrollbar-thumb:window-inactive {background:rgba(204,0,0,.4);border:1px solid #333;}* {box-sizing: border-box;}html{}* {box-sizing:border-box;}.line::after {content: "";clear: both;display: inline-table;}[class*="gr-"] {float: left;padding: 15px;border: 0px solid red;}.gr-1 {width: 8.33%;}.gr-2 {width: 16.66%;}.gr-3 {width: 25%;}.gr-4 {width: 33.33%;}.gr-5 {width: 41.66%;}.gr-6 {width: 50%;}.gr-7 {width: 58.33%;}.gr-8 {width: 66.66%;}.gr-9 {width: 75%;}.gr-10 {width: 83.33%;}.gr-11 {width: 91.66%;}.gr-12 {width: 100%;}.no{padding:0;}.tleft {text-align:left;}.tright {text-align:right;}.tcenter {text-align:center;}.tfleft {float:left;}.tfright {float:right;}.imgresp img, img.imgresp{display:block;width:100%;height:auto;margin:0 auto;}.divider{opacity:0;}

/*** Layout Customization ***/
#main{display:block;height:auto;width:90%!important;margin:0 auto!important;float:none;box-sizing:border-box;clear:left;padding:0;}
.alldesign{background-color:#fff;-webkit-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}
.myheader h2{font-size:3.33em;font-weight:100;}
.myfooter{background-color:#222;color:#f1f1f1;-webkit-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}

/*** Reset Custom for MFC Default ***/frame{display:block;width:99%;height:450px;margin-top:5px;margin-bottom:5px;}iframe{display:block;width:99%;height:450px;margin-top:5px;margin-bottom:5px;}embade{display:block;width:99%;height:450px;margin-top:5px;margin-bottom:5px;}.profile_row #profile_about_me{}#photo_gallery_previews {display:block;width:90%;position:relative;margin:0 auto;background-color:rgba(255,255,255,.80);border:1px solid #ccc;margin:25px auto;padding:10px 17px;color:#ccc;border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;-webkit-border-radius:7px;font-family: sans-serif;}.user_comment_textarea_small,.user_comment_textarea_small:focus {width:850px;height:100px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;padding:12px;margin:10px auto;background:rgba(255,255,255,.50);border:1px solid #ccc;color:#444;}textarea:focus {-webkit-transition:height .4s ease-in-out;transition:height .4s ease-in-out;}.user_comment_textarea_big {width:850px;height:150px;padding:15px;background:rgba(255,255,255,.80);color:#555;margin:10px auto;font-family:sans-serif;outline:none;outline-style:none;font-size:18px;}.wall_post_avatar img {background-color:#f1f1f1;margin-top:1px;margin-left:-5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;border:2px solid rgba(255,255,255,0.0);width:70px;height:70px;}#no_profile_avatar {display:none;}.wall_post_avatar:hover img {background-color:#939;}.wall_post_info {width:700px;margin-left:42px;border-bottom:1px dotted #666;}.img_radius_shadow {-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}div.wall_post {display:block;margin-top:10px;font-size:18px;background-color:rgba(255,255,255,0.70);border:1px solid #f1f1f1;margin:25px auto;padding:10px 17px;color:#666;border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;-webkit-border-radius:7px;transition:all .9s;-moz-transition:all .9s;-ms-transition:all .9s;-o-transition:all .9s;-webkit-transition:all .9s;font-family:sans-serif;}div#profile_about_me.profile_subsection {text-indent:2px;background:transparent rgba(0,0,0,0.0);background-repeat:no-repeat;background-position:top right;}.wall_post a,.wall_post a:visited {color:#444;text-decoration:none;}.wall_post a:hover {color:#93C;text-decoration:none;}div#comments {padding:10px 10px;margin-top:30px;background:none;}form#new_comment.hidden {padding:10px;background:rgba(0,0,0,0.0);border:0 solid #fff;border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;height:auto;margin-top:60px;}#craziest_thing_label.label {display:block;}#be_anywhere_container,#hobbies_container,#talents_container,#perfect_mate_container,#perfect_date_container,#turn_ons_container,#five_things_container,#know_me_container,#for_fun_container,#favorite_songs_container,#favorite_movies_container,#craziest_thing_container,#favorite_books_container,#meaning_life_container,#know_me_container {display:block;background-color:rgba(255,255,255,0.80);color:#666;border-radius:5px;-webkit-border-radius:5px;margin:10px auto 4px auto;font-family:sans-serif;padding:5px 7px 12px;}p{font-family:sans-serif;font-weight:300;}#profile_about_me {padding:0;margin:0 auto;}.photo_gallery_count{color:#777;}#rate_label,#average_rating_label,#admirers_label,#friends_label,#favorite_models_label {color:#848080;font-family:sans-serif;font-weight:300;}#about_me_container,#about_me_value {visibility:visible!important;font-family:sans-serif;}#profile_friends {display:block;width:90%;margin:10px auto 30px auto!important;color:#ccc;padding:10px 13px;background-color:rgba(255,255,255,0.80);border:1px solid #ccc;font-size:15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}input[type="submit"],.post_comment_btn,.preview_comment_btn {padding:11px 22px;text-decoration:none;border:1px solid #ccc;background-color:#111111;color:#444;font-size:16px;text-align:center;}input[type="submit"]:hover,.post_comment_btn:hover,.preview_comment_btn:hover {padding:11px 22px;text-decoration:none;background-color:#96C;color:#444;}/***Reset***/ .profile_section_content .heading {display:none;}.wall_post_time,.convert-time {display:none;}#profile_main_photo,#tags_container,#about_me_label {display:none;}#profile_interests_content .label {display:block;width:96%;height:auto;margin:4px auto 7px 3px;padding:3px 15px;}
@media only screen and (max-width: 728px) and (min-width: 300px){
body{ background-color: #f1f1f1; color: #333;	font: 15px/20px -apple-system, "HelveticaNeue", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;width:90%;margin:0 auto; }[class*="gr-"]{width:100%;}.myheader h2{font-size:1.33em;font-weight:100;}}
.line {width:100%;height:0%;float:none;clear:left;padding:0;}

Make sure that you do remember to wrapp the css markup between <style> and </style> tags, folowed by the HTML markup code

Camgirl Live Editor - Divider