how to print 3 table in each A4 paper ( in html content ) - html

I want to print 3 tables in each A4 paper.
My Html code is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: tahoma;
color: #333333;
-webkit-print-color-adjust: exact;
}
body {
font-size:4.5mm;
margin-left: 2mm;
margin-top: 2mm;
margin-right: 2mm;
margin-bottom: 2mm;
}
#page {
width:210mm;
height:297mm;
padding:0px;
margin:0px;
-webkit-print-color-adjust: exact;
}
#container{
border:1mm #000000 solid; float:left; height:80mm;
width:195mm; margin-bottom:2mm;
}
-->
</style>
</head>
<body>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
</body>
</html>
In print preview some pages are correct ( 3 tables in A4 page ) and some pages are wrong ( more/least than 3 tables in A4 page )
I want to print exactly 3 tables in each A4 page.
Excuse me for my English.
Please guide me with code.


How are you trying to printing it - #page property might not be supported by all browsers. You could use an HTML to PDF converter like Weasyprint where you can supply your HTML and generate a PDF which you could print. You need to do this after each table(assuming the table itself is less than a A4 sheet):
<div style="page-break-after:always"></div>

Related

how to adjust all spaces between pictures to be exactly the same

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>

How is the padding of display:table-cell determined

I'm trying to come out with a table-like layout, with medicine names appearing on the left and the data occupy the rest of the table. Simply put:
+-------------+------------+
medicine 1 | some data | some data |
+-------------+------------+
medicine 2 | some data | some data |
+-------------+------------+
Since I want to keep the data grid dynamic, I use two <div>'s with the style display:table-cell as two containers, the left one for all the medicine names, and the right one for the data grid. There are several inner <div>'s inside these two table-cell <div>'s, but I'm not sure why the left one has a big padding area on the top when I use Chrome inspect interface to investigate it (please see the image below):
I'm not quite sure which part went wrong, and the inspect interface didn't give me information that seems relevant. I want to learn how to approach this situation. Here is the html code for your reference:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
</div>
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
</div>
</div>
<div style="display:table-cell; overflow:hidden; max-width:800px">
<div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

This is about vertical alignment. The default one is set to baseline and produce this output. Simply change the alignment to top on the table-cell and you won't have this issue:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;
vertical-align: top;">
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
</div>
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
</div>
</div>
<div style="display:table-cell;
vertical-align: top; overflow:hidden; max-width:800px">
<div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Since your code is a bit complex, here is a basic one to reproduce the issue and better understand what's happening:
.table {
display: table;
border: 1px solid;
margin: 5px;
}
.table>div {
display: table-row;
}
.table>div>span {
display: table-cell;
padding: 0 5px;
}
.table>div>span span {
display: inline-block;
}
baseline
<div class="table">
<div>
<span>one line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
baseline
<div class="table">
<div>
<span>two<br> line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
baseline (with overflow:hidden)
<div class="table">
<div>
<span>one line</span>
<span><span style="overflow:hidden;">two <br> line</span></span>
</div>
</div>
baseline (with overflow:hidden)
<div class="table">
<div>
<span>one line</span>
<span><span style="overflow:hidden;">another line</span></span>
</div>
</div>
top will fix all the cases
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span>two <br> line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span style="overflow:hidden;">two <br> line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span style="overflow:hidden;">another line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">two<br> line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
You can clearly see how the use of inline-block (and overflow:hidden) is the culprit here as it make the calculation of the baseline counter intuitive and unexpected.

I see that Temani Afif has already provided solution to your original problem. But in case if it helps you in anyway or anyone else, here is the basic structure of a table with sub-tables
Styles
<style>
.table {
display:table; border:1px solid #ccc; border-collapse:collapse
}
.table .row {
display:table-row; border:1px solid #ccc; border-collapse:collapse
}
.table .row .headercell {
display:table-cell; border:1px solid #ccc; height: 80px; width: 150px; border-collapse:collapse
}
.table .row .cell {
display:table-cell; border:1px solid #ccc; height: 80px; Width: 300px; border-collapse:collapse
}
</style>
Table structure
<div class="table">
<div class="row">
<div class="headercell">
Row1
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
Cell1
</div>
<div class="cell">
Cell2
</div>
</div>
<div class="row">
<div class="cell">
Cell3
</div>
<div class="cell">
Cell4
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="headercell">
Row2
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
Cell1
</div>
<div class="cell">
Cell2
</div>
</div>
<div class="row">
<div class="cell">
Cell3
</div>
<div class="cell">
Cell4
</div>
</div>
</div>
</div>
</div>
</div>

HTML doesn't fit text that there is space for

This is the layout that I want to achieve
But for some reason when I add the paragraph right next to the picture, it breaks the whole div, and I'm left with this:
Also, you can see that instead of overflowing, it tries to concatenate it. It even adds a ruler at the bottom.
This is my code:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
Let me note that there is enough space to fit the text, it just breaks the moment it reaches the end of the screen.

You can use flexbox to solve this probplem. Just add 'display: flex;' property to the container element:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div style="display: flex;">
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top;">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>

For long paragraph issue:
Add word-break:break-all style inline body tag.
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="word-break:break-all; background-color:#f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>

If I understood your issue correctly, you want the text to overflow to the next line instead of creating a horizontal scrollbar?
For this you'll need to give the div a defined width and add word-wrap: break-word;
#overflow{
width:100vw;
word-wrap: break-word;
}
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div id="overflow">
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>

There is a much simpler way to add text next to an image: just put them in the same div, and add the style float: left; to the image, like this:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div>
<img src="./images/karta_small.jpg" width="180" height="280" hspace="60" style="float: left;">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div style='word-break: break-word;'>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
To wrap the single word paragraph to the next line, add style='word-break: break-word;' to the div that contains it.

How do I center specific content without affecting the rest?

I'm very new to programming but so far I'm addicted to it! I've looked on this site before posting my own question. I have found part of what I looked for but after trying few codes around, it didn't work so I thought about breaking the ice and asking for help!
Note: I'm using Kompozer.
What I try to attempt: I want the header and the footers to be full width while keeping the rest centered. I also want the white space below the footer to be full width just like at the top of the header. See this example.
Compared to that website, my website is yes centered but there is white space on each side and a bit of it below my footer. I hope I'm being clear enough for you to give me a hand! Thanks a lot!
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
#wrap {
margin: 0 auto;
width: 1156px;
}
<body>
<div id="wrap">
<div id="headers">
<div id="left">
<div id="h1">
<div style="text-align: left;">
<div style="text-align: left;">
<img style="width: 27px; height: 27px;" alt="" src="images/phone-icon-hi.png" align="top" vspace="5">+1-844-Meb-Zone
<img style="width: 27px; height: 27px;" alt="" src="images/icon-mail-grey-150x150.png" align="top" vspace="5">support#meb-zone.com
<br>
</div>
</div>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="h2">
<img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">Try Our Customer Rewards Program & Save Money on every order!
<img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">
<br>
</div>
</div>
</div>
<div id="menus">
<div id="left">
<div id="m1">
<div style="text-align: center;">
<div style="text-align: left;">
<img style="width: 384px; height: 76px;" alt="" src="logo/LGO2015_2.png" align="middle">
<br>
</div>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="right">
<br>
</div>
</div>
<div id="navigations">
<div id="left">
<div style="text-align: center;" id="nav1">
<div style="text-align: left;">HomeStoreBlogContactFAQ
<br>
</div>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="n2">
<img style="width: 18px; height: 18px;" alt="" src="images/user.png" align="top" vspace="5">My Account
<img style="width: 18px; height: 18px;" alt="" src="images/basic1-136_heart_favorite_list-128.png" align="top" vspace="5">My wishlist
<img style="width: 24px; height: 24px;" alt="" src="images/36.png" align="top" vspace="5">Checkout
<img style="width: 21px; height: 21px;" alt="" src="images/checkout-empty-128.png" align="top" vspace="5">Cart
<img style="width: 18px; height: 18px;" alt="" src="images/protection_lock-512.png" align="top" vspace="5">Login
<br>
<br>
<br>
</div>
</div>
</div>
<div style="text-align: left;">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<br>
</div>
<br>
<br>
<br>
<br>
<div id="store_content">
<div id="left_st">
<div id="category">category left</div>
</div>
<div id="right_st">
<div id="products">products left</div>
</div>
</div>
<div id="footers">
<div id="left">
<div style="text-align: center;">
<div style="text-align: left;">SERVICE
<br>Contact Us
<br>Blog
<br>FAQ's
<br>Customer Rewards Program
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="f2">ABOUT MEB ZONE
<br>Shipping & Payment
<br>Terms Of Service
<br>Return Policy
<br>Privacy Policy
<br>Company Information
<br>
</div>
</div>
</div>
<div id="bottom_footer">
<br>
<div style="text-align: center;">
Copyright © 2015 Meb Zone.com All rights Reserved.
<br>
</div>
<br>
</div>
</div>
</body>

I think your problem is from the body.
Try this:
body {
padding:0;
margin:0;
}
or this..
<body style="margin:0; padding:0">
(all your stuff here)
</body>

Page display issue

Exactly the div tag should be place in right hand side but this is placed in left hand side only in firefox.
My page looks fine in any other browser but in firefox the page looks differnet my code is
<div style="width: 400px; height: 280px; float:left; margin-left: 15px;margin-top: 3px">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="image/forslider/slider1.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="image/forslider/slider2.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="image/forslider/slider3.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="image/forslider/slider4.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="image/forslider/slider5.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<img src="image/forslider/slider6.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
</div>
</div>
</div>
</div>
the div tag must be placed in right hand side.

Try to change from float:left; to float:right; in the first div

Try something like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#right {
text-align: left;
width: 200px;
position:absolute;
right:1%;
background-color: blue;
}
</style>
</head>
<body>
<div id="right">Some Text</div>
</body>
</html>