スタイリングありがとうございましたページ

Question

私はフォーム提出から感謝のページをスタイルしています。 - ページの背景色 - ユーザーのプロフィール画像の周りの枠線のプレースホルダー - ユーザー情報の上とユーザー情報の下に1行表示します。 列1は 列2が 列3は、コメントにあるコメントを除くすべてのフォームの情報であり、ユーザのプロフィール画像です：

ザ・ページは3つの列で構成されてありがとうございました。

#columncontainer { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
#column1 { 
 
    float: left; 
 
    width: 240px; 
 
} 
 

 
#column2 { 
 
    float: left; 
 
    width: 480px; 
 
} 
 

 
#column3 { 
 
    float: left; 
 
    width: 240px; 
 
} 
 

 
#footer { 
 
    clear: both; 
 
} 
 

 
#image { 
 
    margin-left: auto; 
 
} 
 

 
#columncontainer { 
 
    background-color: white; 
 
}

<h1>Thank you for your information.</h1> 
 
<h3>Below is your profile information.</h3> 
 

 
<div id="columncontainer"> 
 
    <div id="column1"> 
 

 
    all column 1 data here 
 
    <figure>propic.png <figcaption>Profile Pic</figcaption> </figure> 
 
    </div> 
 

 
    <div id="column2"> 
 
    <hr> 
 
    all column 2 data here 
 
    <hr> 
 
    </div> 
 

 
    <div id="column3"> 
 
    all column 3 data here 
 
    </div> 
 
</div>

がどのように私はこれらのページを向上させることができます

ここでお礼ページのHTMLコードですか？

注：変更背景色や枠線の色あなたが望むよう、あなたの要件ごとのようにコードの下

Answer 1

。

<div class="main-div"> 
    <header> 
     <h1>Thank you for your information.</h1> 
     <h3>Below is your profile information.</h3> 
     <hr> 
    </header> 
    <div id="columncontainer"> 
     <div id="column1"> 
      <div class="div-col1"> 
      all column 1 data here 
      <figure>propic.png <figcaption>Profile Pic</figcaption> </figure> 
     </div> 
     </div> 

     <div id="column2"> 
      <div class="div-col2"> 
      all column 2 data here 
      </div> 
     </div> 

     <div id="column3"> 
      all column 3 data here 
     </div> 
    </div> 
</div> 

CSS

header{ 
    text-align: center; 
} 
.main-div { 
    background: #ececec; /*change background color here*/ 
    width: 960px; 
    margin: 0 auto; 
    min-height: 550px; /*minimum page height*/ 
    height: auto; 
} 
#column1, #column2, #column3{ 
    float: left; 
    padding: 0 9px; 
} 
#column1, #column3{ 
    width: 25%; 
} 
#column2 { 
    width: 44%; 
} 
.div-col1{ 
    border: 1px solid #ccc; /*change border color*/ 
    padding: 5px; 
} 
.div-col2{ 
    border-top: 1px solid #ccc; /*change border color*/ 
    border-bottom: 1px solid #ccc; /*change border color*/ 
    padding: 5px; 
} 
#footer { 
    clear: both; 
} 
#image { 
    margin-left: auto; 
}