Format issue with using css display feature to add table in html
up vote
2
down vote
favorite
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>css html5
edited Nov 10 at 11:09
Foo
1
asked Nov 10 at 10:59
ambach 66
307
add a comment |
up vote
2
down vote
favorite
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>css html5
edited Nov 10 at 11:09
Foo
1
asked Nov 10 at 10:59
ambach 66
307
So, you want to display the photo and the details in 1 line? The details is in the left, and the photo is in the right, isn't it?
– Foo
Nov 10 at 11:14
yeah both in one line. right now personal details come in row after photo. actually i have added personal details first and then image. some how image came before personal details
– ambach 66
Nov 10 at 11:17
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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>css html5
edited Nov 10 at 11:09
Foo
1
asked Nov 10 at 10:59
ambach 66
307
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>.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>.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>css html5
css html5
edited Nov 10 at 11:09
Foo
1
asked Nov 10 at 10:59
ambach 66
307
edited Nov 10 at 11:09
Foo
1
asked Nov 10 at 10:59
ambach 66
307
edited Nov 10 at 11:09
Foo
1
edited Nov 10 at 11:09
Foo
1
edited Nov 10 at 11:09
Foo
1
1
asked Nov 10 at 10:59
ambach 66
307
asked Nov 10 at 10:59
ambach 66
307
asked Nov 10 at 10:59
ambach 66
307
307
So, you want to display the photo and the details in 1 line? The details is in the left, and the photo is in the right, isn't it?
– Foo
Nov 10 at 11:14
yeah both in one line. right now personal details come in row after photo. actually i have added personal details first and then image. some how image came before personal details
– ambach 66
Nov 10 at 11:17
add a comment |
So, you want to display the photo and the details in 1 line? The details is in the left, and the photo is in the right, isn't it?
– Foo
Nov 10 at 11:14
yeah both in one line. right now personal details come in row after photo. actually i have added personal details first and then image. some how image came before personal details
– ambach 66
Nov 10 at 11:17
So, you want to display the photo and the details in 1 line? The details is in the left, and the photo is in the right, isn't it?
– Foo
Nov 10 at 11:14
So, you want to display the photo and the details in 1 line? The details is in the left, and the photo is in the right, isn't it?
– Foo
Nov 10 at 11:14
yeah both in one line. right now personal details come in row after photo. actually i have added personal details first and then image. some how image came before personal details
– ambach 66
Nov 10 at 11:17
yeah both in one line. right now personal details come in row after photo. actually i have added personal details first and then image. some how image came before personal details
– ambach 66
Nov 10 at 11:17
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
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>answered Nov 10 at 11:23
Foo
1
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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>answered Nov 10 at 11:23
Foo
1
add a comment |
up vote
2
down vote
accepted
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>answered Nov 10 at 11:23
Foo
1
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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>answered Nov 10 at 11:23
Foo
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>.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>.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>.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>.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>answered Nov 10 at 11:23
Foo
1
edited Nov 10 at 11:29
answered Nov 10 at 11:23
Foo
1
answered Nov 10 at 11:23
Foo
1
answered Nov 10 at 11:23
Foo
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238255%2fformat-issue-with-using-css-display-feature-to-add-table-in-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So, you want to display the photo and the details in 1 line? The details is in the left, and the photo is in the right, isn't it?
– Foo
Nov 10 at 11:14
yeah both in one line. right now personal details come in row after photo. actually i have added personal details first and then image. some how image came before personal details
– ambach 66
Nov 10 at 11:17