How To Create Two Column Page in HTML5 through Notepad++ - html

Trying to make a two column page so I can have two columns of information. I cannot get it to work though. I have a large table that takes up half the page and is pushed to the left, but I cannot get the other part to go on the right! It just goes underneath. Please if you know how tell me. I have to do this for a school project! Here is my code:
.body {
font-family: "Bookman Old Style";
background:url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;-->
.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {
}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>My Typical Day</title>
</head>
<body class="body">
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td><!--TAKEN OUT--></td>
</tr>
<table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<h5><em>Email Me!</em></h5>
</div>
</center>
</body>
</html>
Can anyone tell me what to do to fix it and attach a working version? I'm also doing this in Notepad++, not sure if that makes a difference.


You just need to make sure that your element tags are closed in the correct places, CENTER, DIV and TABLE tags all needed to be closed correctly.
Also, the CENTER tag is now deprecated and it is recommended that you use CSS to center your elements, like text-align: center
body {
font-family: "Bookman Old Style";
background: url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;
-->.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</center>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
</table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<div>
<h5><em>Email Me!</em></h5>
</div>
</center>


Div elements will display as "block" elements by default, which only allows one per line. The next block level element will appear below it.
Add this CSS rule to .rowone and .rowtwo: display: inline; or display: inline-block;
Edit: MichaelvE's answer is correct. Floating block level divs will allow two blocks to appear on the same line, much like an inline element. I missed the open tags when skimming over the code.

Related

Place two cells under a header with the colspan of 1

I am struggling to put the cells containing { Lazy, Dog, Then, It } under the same header (with a colspan of 1)
I've tried creating div tags within my cell, creating 2 cells, and all the possible widths and colspan combinations I can think of.
Using div tags and CSS I can get Lazy and Dog under the header, but they are not individual cells.
<html>
<head>
<style>
table,td,tr,th{
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Quick</th>
<th>brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td><div class="lazy">lazy</div> <div class="dog">dog</div></td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=2> prey to a lion </td>
</tr>
</table>
</body>
</html>
Thank you for any advice.

add colspan="2" to <th>brown fox</th>
you don't have to put div inside <td> to separate data
then edit your <td colspan=2> prey to a lion </td>
to <td colspan="3"> prey to a lion </td>
here is the working fiddle, hope it helped you
https://jsfiddle.net/LLa90017/1/

Easy as pie as follows:
table, td, tr, th {
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
<table>
<tr>
<th>Quick</th>
<th colspan="2">brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td>lazy</td>
<td>dog</td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=3> prey to a lion </td>
</tr>
</table>

Getting tables side by side with H4 tag on top of each table

I cannot get this to work for the life of me. I want to have both tables side by side on the same line and have the h4 tag over top of the right table it is suppose to be with. I can get the tables side by side without the h4 tags but i want the h4 tags. Also for these tables to be one on the left and one on the right. Sorry if this is a lot.
This is what I have so far.
.table1,
#tableTitle1 {
float: left;
display: inline-block;
}
.table2,
#tableTitle2 {
float: right;
display: inline-block;
}
.table1,
.table2 {
height: 230px;
display: inline-block;
text-align: center;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}
<!--First Table-->
<h4 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
<!--Second Table-->
<h4 id="tableTitle1">Graduates Employment Rates</h4>
<table class="table2">
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>

Why not simply add the title as table caption, here with an extra wrapper to keep them side-by-side, top aligned.
.tablewrap {
white-space: nowrap;
}
#tableTitle1,
#tableTitle2 {
font-size: 20px;
font-weight: bold;
padding: 10px 0;
}
.table1,
.table2 {
height: 230px;
display: inline-table;
text-align: center;
white-space: normal;
vertical-align: top;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}
<div class="tablewrap">
<!--First Table-->
<table class="table1">
<caption id="tableTitle1">
Graduates Status 2015
</caption>
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
<!--Second Table-->
<table class="table2">
<caption id="tableTitle1">Graduates Employment Rates</caption>
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>
</div>

Just wrap the tables and H4s in a div, and float them:
//css
.table-wrapper {
float: left;
width: 50%;
}
//html
<div class="table-wrapper">
<h4 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
...
</table>
</div>
https://jsfiddle.net/jrp1f2dg/

You just need to wrap the html elements you want into span's, and then apply flex properties to them with css. See the codepen.
html:
<!--First Table-->
<span class="flex-wrapper">
<span class="flex-wrapper columns">
<h1 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
</span>
<span class="flex-wrapper columns">
<!--Second Table-->
<h1 id="tableTitle1">Graduates Employment Rates</h4>
<table class="table2">
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>
</span>
</span>
css:
.flex-wrapper {
display: flex
}
.columns {
flex-direction: column
}
.table1,
#tableTitle1 {
float: left;
display: inline-block;
}
.table2,
#tableTitle2 {
float: right;
display: inline-block;
}
.table1,
.table2 {
height: 230px;
display: inline-block;
text-align: center;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}
Here's what it will look like:

You have display:inline-table.It just makes table element to behave inline
I guess we can make use of it here
check this [link][1]
Hope this helps

You have typing mistake with second id, it could be tableTitle2 instead tableTitle1.
Then wrap each table with its <h4> in div and apply float for them:
<div class="left">
..your markup..
</div>
<div class="right">
..your markup..
</div>
.left {
float: left;
}
.right {
float: right;
}
Jsfiddle
If you want responsive tables, use percents for their widths:
div {
width: 50%;
}
.table1,
.table2 {
width: 100%;
}
Jsfiddle2
I commented all unused css

Table caption alignment

I've a table with caption centered middle. At the right side of the caption, there is a link with refers to another page for detailed view. If my link text is too large, then the caption middle alignment is broken, it is pushed left. All I want to keep the caption at the middle regardless of the placement of link. That means, caption should be middle aligned.
Problem Demo
<div class="col-xs-4">
<table class="table">
<caption>Table Caption<a class="detail-link">large link placed at right</a></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
/* CSS used here will be applied after bootstrap.css */
.detail-link {
float: right;
}

It can be done using a div tag combined with some relative positioning as seen below.
<div class="col-xs-4">
<table class="table">
<caption>Table Caption</caption>
<div style="position:relative;float:right;top:20px;">text too long</div>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>

Positioning it as absolute will achieve your requirement.
.detail-link {
position:absolute;
right: 0;
width: 30%;
}

You could try this:
CSS:
.detail-link {
float:right;
width:30%;
}
span{
position:relative;
left:26px;
}
HTML:
<div class="col-xs-4">
<table class="table">
<caption><span>Table Caption</span><a class="detail-link">large links asfasf asf asdf as at right</a></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
span{position:relative;
left:26px;
}

you could do:
Table Caption also should float:right; and replace to after your link
CSS:
/* CSS used here will be applied after bootstrap.css */
.detail-link {
float: right;
}
span {
float:right;
margin-right:15px;
}
HTML:
<div class="col-xs-4">
<table class="table">
<caption><a class="detail-link">large link placed at right</a><span>Table Caption</span></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
i hope it's helpfull

Table position different in IE

I'm new to web development. I'm building a simple site using HTML and CSS. I have a page with 2 price lists made from tables. I have them both in one div and I want them on top of each other. There is a picture to the right of them. In firefox all is ok when I use absolute position, but in IE7 the picture pops up in between the two tables. I've tried floating right and left, positioning absolute and relative. Is it something to do with Quirks? I also changed the doctype to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
This a bit of my code.
HTML:
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
<tr>
<table>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
And CSS: (My last attempt using float)
#pricepicture {
float: right;
margin-right: 40px;
margin-top: 100px;
border: 1px solid #2c2e32;
height: 365px;
width: 310px;
}
#table {
float: left;
margin-left: 40px;
margin-top: 50px;
border-collapse: collapse;
}
#price {
float: left;
margin-left: -5px;
margin-top: 40px;
}
td {
text-align: left;
padding: 0.2em;
font-size: 1.3em;
}
th {
text-align: left;
padding: 0.2em;
font-size: 1.1em;
}
tr {
height: 20px;
}
I've been searching the Stack overflow Questions for days. Please help before I throw my laptop out of the window!
Thanks....

There are some HTML syntax errors. You must ensure that all tags are properly closed, and in the correct order. See the following.
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
</table>
<table>
<tr>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</table>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>

how to give css for following data

how to give css for getting the page as follows in the same div. am having the data in the following way with more sub parts as in the second phase.
abcde
a production productions
limited
total
jackson
b productions productions
limited
the code am using is as follwos.
css
.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
margin:0 10px 0 0;
word-wrap:break-word;
}
.text_right22 {
width: 20%;
float:left;
text-align:center;
}
.text_right23 {
width: 55%;
float:left;
}
html as
<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div>
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>
but it is not working the data is clashing if there are more sub parts

it would be easier if you use tables with rowspan ..and css can be used to adjust the width and margins of the cells here is the code
<!DOCTYPE html>
<html>
<body>
<table >
<tr>
<td rowspan="9">total</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>abcde</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>jackson</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
</table>
</body>
</html>