I have header and footer when i printing.
But on the first page, i just want that cover page to be clean. So i only can have a picture or title there.
Right now i have my header and footer also at this cover page. I don´t want that.
I have tried to use
#page:first {margin:0;}
I still have the header and footer.
Give me the easiest way to do this in CSS, and please explain why.
The Code
<html>
<head>
<style>
</style>
</head>
<body>
<div class="page-header ">
<table style="width:100%">
<tr>
<p>Hello</p>
</tr>
</table>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="masthead">
<p>Hello</p>
</div>
<div class="page">
<div>
<p class="test"> </p>
</div>
<div class=" col test-2">
<p>
Text
</p>
</div>
</div>
<div class="page">
<div>
<p class="test-3"> </p>
<h1 style="text-align:center">Text</h1>
</div>
<div style="margin-top: 100px;">
<p>Text.</p>
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;">
<h1 class="test">Text</h1>
</p>
</div>
<div>
<p class="test-5"> </p>
<h2 style="text-align:left">Text</h2>
</div>
<div>
<p class="test-5"> </p>
</div>
<div>
<div>
<p class="test-5"> </p>
</div>
<br />
<div>
<p class="test-5"> </p>
</div>
<br />
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;">
<h1 class="test">Text</h1>
</p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
You may add an element to display as first page, like this:
<div class="print-first-page">
your first page content here
</div>
Then hide it from screen and show on printed page:
.print-first-page {
display: none;
}
#media print {
.print-first-page {
display: block;
width: 100%;
height: 100%;
}
}
Here is the complete example with your code:
<head>
<style>
.print-first-page {
display: none;
}
#media print {
.print-first-page {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div class="print-first-page">
your first page content here
</div>
<div class="page-header ">
<table style="width:100%">
<tr>
<p>Hello</p>
</tr>
</table>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="masthead">
<p>Hello</p>
</div>
<div class="page">
<div>
<p class="test"> </p>
</div>
<div class=" col test-2">
<p>
Text
</p>
</div>
</div>
<div class="page">
<div>
<p class="test-3"> </p>
<h1 style="text-align:center">Text</h1>
</div>
<div style="margin-top: 100px;">
<p>Text.</p>
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;"><h1 class="test">Text</h1></p>
</div>
<div>
<p class="test-5"> </p>
<h2 style="text-align:left">Text</h2>
</div>
<div>
<p class="test-5"> </p>
</div>
<div>
<div>
<p class="test-5"> </p>
</div>
<br />
<div>
<p class="test-5"> </p>
</div>
<br />
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;"><h1 class="test">Text</h1></p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm creating a simple chat app with Bootstrap 4 and I'm having difficulty with a static footer. The messages are getting hidden behind the footer. How can I make it so that the messages do not get put underneath the input box/footer?
.content {
margin-bottom: 100px;
}
.message {
float: left;
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
clear: both;
}
.my-message {
float: right;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
}
.input-form {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<nav class="navbar navbar-dark bg-dark blue fixed-top">
<span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
</nav>
<div class="container" style="padding-top: 85px;">
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
</div>
</div>
<div class="footer">
<form class="input-form">
<div>
Please wait for a user to join ...
</div>
<div class="input-group mb-1 px-2">
<input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" id="sendmessage">Send</button>
</div>
</div>
</form>
</div>
The problem is your .messages are floating, so you need to clear them on the the .content container. I added an ::after element to clear, and padding instead of margin to the .content container.
.content {
padding-bottom: 100px;
}
.content::after {
content: '';
display: block;
clear: both;
}
.message {
float: left;
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
clear: both;
}
.my-message {
float: right;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
}
.input-form {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<nav class="navbar navbar-dark bg-dark blue fixed-top">
<span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
</nav>
<div class="container" style="padding-top: 85px;">
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
<form class="input-form">
<div>
Please wait for a user to join ...
</div>
<div class="input-group mb-1 px-2">
<input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" id="sendmessage">Send</button>
</div>
</div>
</form>
</div>
You can also try this with flex :
.content {
margin-bottom: 100px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-self: flex-start;
flex-direction: column;
}
.message {
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
}
.my-message {
align-self: flex-end;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
}
.input-form {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<nav class="navbar navbar-dark bg-dark blue fixed-top">
<span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
</nav>
<div class="container" style="padding-top: 85px;">
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
</div>
</div>
<div class="footer">
<form class="input-form">
<div>
Please wait for a user to join ...
</div>
<div class="input-group mb-1 px-2">
<input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" id="sendmessage">Send</button>
</div>
</div>
</form>
</div>
All my pictures must meet the following criteria:
1). Whenever using computer or cell phone to view, must appear 4 items on same line, without RWD function.
2) No matter what the height and width measurements all outer frame must be identical, I spent days to adjust like this, but I found distance from picture to picture (https://drive.google.com/file/d/1fsUN5ms1U4hfSoXl-oNcvEiwBwfVNpoZ/view?usp=sharing) are different, please advise how to adjust all spaces between pictures to be exactly the same.
Another question is how to control ever line's spacing? If I key in xxx, every line's space height will be too wide, need to shrink the height, I still cannot solve through setting, can anyone lend a helping hand? Appreciate it very much.[problem][1]
website URL
<table class="table table-borderless" style="margin:0px 0px;" cellpadding="3">
<tr>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/001.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/002.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/003.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/004.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/005.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/006.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/007.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/008.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/009.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/010.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
</table>
You should not be using table.
You should be using the grid layout.
Here is a great guide.
EDIT:
Does this work for you?
.grid-container {
display: grid;
/* Use % instead of px for it to be proportionnal to the frame width */
grid-template-columns: 20% 20% 20% 20%;
grid-gap: 15px;
padding: 0px;
}
.grid-item {
background-color: lightgreen;
}
.grid-item>img{
/* make it so the image take up the whole grid-item width */
width: 100%;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="">
IMAGE
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
</div>
I'm using bootstrap and I have this footer that is 4 columns. I have it set to text-center which places everything in the center of the column, but also center justifies everything making it look weird. I would like to keep everything centered in their columns but also left justified, if this isn't possible any suggestions on how to make this look better would be appreciated. it needs to stay 4 columns though.
here is my codepen
https://codepen.io/RobotHead/pen/MWYZBwm
here is the code:
<div class="Layout">
<div>
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-3 footer-column">
<div class="h3 m-20 no-m-lr">Contact Us</div>
<div class="block-center">
<p>MySite</p>
<p class="block">123xyz st</p>
<p class="block">Suite 7</p>
<p class="block">Marklar, Mr 555555</p>
<p>555-555-5555</p>
<p>
MyEmail
</p>
</div>
</div>
<!-- /Column -->
<div class="col-xs-12 col-sm-6 col-md-3 footer-column">
<div class="block-center">
<h3> Company Information
</h3>
<ul>
<li>
About Us
</li>
<li>
Company Policy
</li>
<li>
Privacy Policy
</li>
<li>
About Us
</li>
<li>
Company Policy
</li>
<li>
Privacy Policy
</li>
</ul>
</div>
</div>
<!-- /Column -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="block-center">
<h3> Get The Latest Deals
</h3>
<p class="mail-text saleprice">Sign up today for our latest deals!</p>
<p>Sign up here: <input type="text"> </p>
<p>Join our savings club</p>
</div>
</div>
<!-- /Column -->
<div class="col-xs-12 col-sm-6 col-md-3 footer-column">
<div class="block-center">
<h3>We Accept</h3>
<p>Accepted Credit Cards</p>
<p>Amex</p>
<p>Discover</p>
<p>Mastercard</p>
<p>Visa</p>
<div class="paypal-logo">
<br>
<table border="0" cellpadding="10" cellspacing="0" align="center">
<tbody>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<a href="https://www.paypal.com/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
<img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/logo-center/12_bdg_payments_by_pp_2line.png" alt="Secured by PayPal" data-image="vrtk4rr60c81">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /Column -->
</div>
</div>
</div>
add this style:
.block-center {
text-align: left;
margin: auto;
display: inline-block;
}
Having the following html, I want to remove display flex whithout affecting the output result. display:flex is NOT working on Internet Explorer. Keep in mind that I can't change the structure of the html elements. I can only add stylesheet.
<table id="TabsTable" width="100%" style="overflow: hidden !important;" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td class="vdcTabs" style="width: 100%;">
<span id="Tab_dlTabs" style="display: flex;">
<span>
<div class="ActiveTab">
<a id="lnktab1">Tab1</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab2" style="">Tab2</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab3" style="">Tab3</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab4" style="">Tab4</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab5" style="">Tab5</a>
</div>
</span>
</span>
</td>
</tr>
</tbody>
</table>
Use display:table to #Tab_dlTabs and display:table-cell. to #Tab_dlTabs > span
It works in all browser.
#Tab_dlTabs > span {
display: table-cell;
}
<table id="TabsTable" width="100%" style="overflow: hidden !important;" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td class="vdcTabs" style="width: 100%;">
<span id="Tab_dlTabs" style="display: table;">
<span>
<div class="ActiveTab">
<a id="lnktab1">Tab1</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab2" style="">Tab2</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab3" style="">Tab3</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab4" style="">Tab4</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab5" style="">Tab5</a>
</div>
</span>
</span>
</td>
</tr>
</tbody>
</table>
Note: If you can don't apply inline css.
Is this what you want!?
Works in every Browser and is as close as you can get to flex
#Tab_dlTabs > span {
float: left;
}
<table id="TabsTable" width="100%" style="overflow: hidden !important;" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td class="vdcTabs" style="width: 100%;">
<span id="Tab_dlTabs" style="">
<span>
<div class="ActiveTab">
<a id="lnktab1">Tab1</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab2" style="">Tab2</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab3" style="">Tab3</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab4" style="">Tab4</a>
</div>
</span>
<span>
<div class="VdcTab">
<a id="lnktab5" style="">Tab5</a>
</div>
</span>
</span>
</td>
</tr>
</tbody>
</table>
I want to place image, arrow , title and input textbox in particular way as in image.
Puting stlye tag in hr or td is not good practice, right? It did not help even
To keep space between tr only <br/>is option or any better way is possible?
How to keep space between arrow, title, textbox without using  
fiddle : http://jsfiddle.net/karimkhan/u7AjH/2/
I want to display content like this:
css:
.content > .container {height: 100%;}
.img-container1 { float:left; height:80% !important; width:40%}
http://jsfiddle.net/u7AjH/4/
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded" />
</div>
<div class="col-xs-6 col-md-6">
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
=>
</div>
<div class="col-xs-4 col-md-4">
<input type="text" class="form-control"/>
</div>
<div class="col-xs-4 col-md-4">
Text Here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
=>
</div>
<div class="col-xs-4 col-md-4" >
<textarea style="height:200px" type="text" class="form-control"></textarea>
</div>
<div class="col-xs-4 col-md-4">
Text Here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
=>
</div>
<div class="col-xs-4 col-md-4">
<input type="text" class="form-control"/>
</div>
<div class="col-xs-4 col-md-4">
Text Here
</div>
</div>
</div>
</div>
</div>
</div>
Although its not that good because I made it just now but i think it can help you.
You may use the grid system of bootstap in order for you to make a responsive grid.
Take a look with this documentation and you will learn more about bootstrap.
http://getbootstrap.com/css/#grid
I hope it can help you.
you can achieve by adding margin as per your requirement.
try this:
.container div{
margin-right:20px;
}
HTML:
<div class="content">
<div class="container">
<div class="img-container1">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded">
</div>
<div class="text-container">
<table>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<textarea name="textArea"></textarea>
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
</table>
</div>
</div>
</div>
CSS
.content > .container {height: 100%;}
.img-container1 { float:left; height:80% !important; width:40%}
.img-container1 img {max-width: 100%;}
.text-container {float: left; height: 80% !important; width: 60%}
.text-container table tr{height: 50px;}
.text-container table tr td:first-child{width: 10%;text-align: center;}
.text-container table tr td{width: 40%;}
.text-container table tr td:last-child{width: 10%;text-align: center;}
.text-container table tr td input{width: 100%;}
.text-container table tr td textarea{width: 100%;height: 200px;resize: none;}
Working Example
http://jsfiddle.net/3vSyL/