CODEWITHSUNDEEP
csshtml
ambach 66
ambach 66

Reputation: 113

Format issue with using css display feature to add table in html

I wish to use the css display feature for a table in order to create a sample resume html page, but I couldn't figure out how I can make both the passport photo and personal details fall in the same column. Right now the personal details are one row below the passport image.

.col-container {
    width: 100%;
    display:table;  /*create as table and behave like table*/
}
.col {
    display: table-cell; /* created as table td and behave like td */
    padding: 20px;
}       
#pics { 
    float: right;
    width: 200px;  
    padding: 5px;
}
<header>
    <h1>Resume</h1>
    <hr>
    <div class="col-container">
        <div class="col">
            <h2>Personal details</h2>
            <p>  Name </p>
            <p>  Name </p>
            <p>  Name </p>
            <p>  Name </p>
        </div>
        <div class="col" id="pics">
            <p> 
              <img src="https://www.photodigital.co.nz/wp-content/uploads/2012/11/passport-sample.jpg" id="pics">
            </p>
        </div>
    </div>
</header>

Upvotes: 2

Views: 77

Answers (1)

T&#226;n
T&#226;n

Reputation: 1

If you want to display the details and the photo in one line, you can try to create 2 div tags. Both of them have float-left class. By using property float: left;, we makes the 2 div tags inline.

.float-left {
  float: left;
}

.details {
  margin-right: 20px;
}

.photo img {
  width: 200px;
}
<header>
    <h1>Resume</h1>
    <hr>
    <div class="float-left details">
        <h2>Personal details</h2>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
    </div>
    <div class="float-left photo">
        <img src="https://www.photodigital.co.nz/wp-content/uploads/2012/11/passport-sample.jpg" id="pics">
    </div>
</header>

Then, you can add other styles to each div tag, like: padding, margin, width, height...

Or if you want to change the photo position to the left side, keep using the two div tags, just update the content and the classes details/photo

.float-left {
  float: left;
}

.details {
  margin-left: 20px;
}

.photo img {
  width: 200px;
}
<header>
    <h1>Resume</h1>
    <hr>
    <div class="float-left photo">
        <img src="https://www.photodigital.co.nz/wp-content/uploads/2012/11/passport-sample.jpg" id="pics">
    </div>
    <div class="float-left details">
        <h2>Personal details</h2>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
    </div>
</header>

Upvotes: 2

Related Questions