My html and css is like this :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Data</title>
<style type="text/css">
body {
font-family: 'Arial';
font-size: 9px;
margin-bottom: 100px;
}
div.global{
width: 100%;
font-size: 12px;
}
div.left {
float: left;
width: 50%;
text-align: center;
}
div.right {
margin-left: 80%;
}
div.center {
margin-left: 35%;
width: 485px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="global">
<div class="left">
<div style="width: 80mm; margin-left: -15px !important;">
data.... <br>
test....
</div>
<hr style="max-width: 80mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
</div>
<div class="right">
<div style="width: 80mm; margin-right: 0 !important">
<table>
<tr style="padding-right:35px">
<td>Lamp</td>
<td align="right">test 1</td>
</tr>
<tr>
<td>No</td>
<td align="right">test 2</td>
</tr>
<tr>
<td>Date</td>
<td align="right">test 3</td>
</tr>
</table>
</div>
<hr style="max-width: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">
</div>
</div>
<div class="center">
data 1 2 3<br>
data 4 5 6
</div>
</body>
</html>
..........................................................
I want display table(table in class=right) on the far right
I try
...............
<div style="width: 80mm; margin-right: 0 !important">
..............
But id does not work
Is there anyone who can help me?
Update
Demos is like this :
https://jsfiddle.net/skfd7215/1/
I appreciate this is an older post and I haven't tested this against the code that you have provided (so I can't guarantee it will work for your given scenario at this stage) but I was researching a solution for forcing relative elements to the right hand side via margin-right as well and found this little beauty:
.element {
margin-left: auto;
margin-right: 0;
}
Example codepen here https://codepen.io/jamie-endeavour/pen/GdrZao
Either way I hope you got sorted. It would be cool if you could share your solution since none of the above answers have been accepted!
That's not what margin-right does. margin-right just gives margin to the right hand side of the element. Try inspecting the element in chrome/firefox dev tools to see where the margin is being added.
Assuming your global class spans the width of the page, you can give global:
position: relative;
and right:
position: absolute;
right: 0;
https://www.w3schools.com/css/css_positioning.asp for more about positioning.
You can you flex to send the content right
<div style="width: 80mm; display:flex; justify-content: flex-end">
jsFiddle
Related
I am creating a website using an online editor. I have a simple table with two columns and one row. On desktop, it looks great but on mobile I have to scroll left and right to see the content.
I would like to make it responsive with the second column going under the first one on small screen.
Here is my code:
<div style="overflow-x: auto;">
<table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;">
<tbody>
<tr style="height: 143.6px;">
<td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
<td style="width: 439px; height: 143.6px;">
<h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
<br />
<p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
</td>
</tr>
</tbody>
</table>
</div>
So on this example, I would like to have the text part going under the picture on small screen. How can I do that please?
Thank you all!
You can use a media query in which you apply display: block; width: 100%; height: auto; to table, tr and td. That way you make them all regular block elements where the tds will flow below each other.
Set the breakpoint as desired. In my snippet I set it to 600px;
And try to avoid inline styles. If you want to use media queries, they are really in your way...
html, body {
margin: 0;
}
table {
height: 452px;
width: 821px;
margin-left: auto;
margin-right: auto;
}
tr {
height: 143.6px;
}
td.x {
width: 280px;
height: 143.6px;
}
td.y {
width: 439px;
height: 143.6px;
}
#media screen and (max-width: 600px) {
table,
tr,
td.x,
td.y {
display: block;
width: 100%;
height: auto;
}
}
<div style="overflow-x: auto;">
<table>
<tbody>
<tr>
<td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
<td class="y">
<h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
<br />
<p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
</td>
</tr>
</tbody>
</table>
</div>
You should not use tables for it. Tables are very inconvenient thing in the terms of responsibility.
Use CSS grid layout for it. In my example, try to resize the screen. When it becomes narrow, columns move one under another. When window is relatively wide, you could see them side-by-side.
https://jsfiddle.net/33fLLdzr/1/
<div class="wrapper">
<div class="box sidebar"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></div>
<div class="box sidebar2">
<h3 style="text-align: left;">It all starts with a test</h3>
<p style="line-height: 1.6; text-align: left;">This is an example. This is an example. Testing and testing again.</p>
</div>
</div>
<style>
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-template-areas:
"sidebar"
"sidebar2"
}
#media only screen and (min-width: 600px) {
.wrapper {
grid-template-columns: 50% 50%;
grid-template-areas:
"sidebar sidebar2"
}
}
</style>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img class="aligncenter wp-image-4684" src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" />
This is an example. This is an example. Testing and testing again.
</body>
</html>
would you want something like this?
I am new to HTML and still learning. I currently have a button and a search bar beside each other and not centered. I am having a problem centering both of them. I have tried several ways but it did not work. What i want is for them to be centered and still beside each other
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
.mine>button,.mine>table{
display: inline-block;float:left;
}
</style>
</head>
<body>
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" style="text-align:center;">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
<br>
</body>
</html>
button and search bar are inline elements so just put them in a div and give the div text-align: center
<div id="mydiv">
<input type="submit" value="Update"/>
<input type="text"/>
</div>
#mydiv{
text-align: center;
}
https://jsfiddle.net/bdellinger/97xybngh/
Are this the only data on the table ? If Yes. why not put a static width for the div that wraps the table and give a CSS of margin: auto;
See my fiddle
CSS:
.mine{
width: 208px;
height: auto;
overflow: hidden;
margin: auto;
}
Hope it helps.
I am wanting to have a page with a fixed-height header and footer, and with the contents taking 100% of the remaining height.
I currently have the behavior I desire working in Chrome, but in Internet Explorer, the row will grow beyond the desired height, forcing the footer off of the page (as evidenced by the scrollbar on the page). I can't find a fix for the Internet Explorer problem for the life of me.
Here is the desired behavior (in Chrome), note the row does not expand to fit contents, and instead has the ability to scroll:
Here is the undesired behavior I am experiencing with Internet Explorer:
Here is the approach I am taking:
<head>
<style>
body {
margin: 0px;
table-layout:fixed;
}
table {
border-collapse:collapse;
}
table, tr, td {
overflow:hidden;
padding: 0px;
}
</style>
</head>
<body>
<table style="width:100%; height:100%; top:0px; bottom:0px;">
<!--HEADER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#ff0000; text-align:center;">
<h1>Piano Festival</h1>
</td>
</tr>
<!--CONTENTS-->
<tr>
<!--LEFT CONTENT PANE-->
<td style="background-color:#ff00ff;">
<div style="height:100%; overflow-y:scroll;">
<form>
<!--Form contents here-->
</form>
</div>
</td>
<!--RIGHT CONTENT PANE-->
<td style="background-color:#00ffff; width:100%;">
</td>
</tr>
<!--FOOTER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#00ff00";>
</td>
</tr>
</table>
</body>
I'd prefer to avoid using any Javascript or CSS extensions. How can I work around this problem so that I get the same behavior in IE that I have in Chrome right now (scrollable contents instead of a growing row height)?
I also highly recommend not using tables for this. Here is a refactored version using divs to get you started.
HTML:
<div class="header">
<h1>Piano Festival</h1>
</div>
<div class="registration">
...lots of stuff....
</div>
<div class="main">
Main section
</div>
<div class="footer">
footer
</div>
And here's the CSS:
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.header {
margin: 0;
background: darkgreen;
height: 10%;
}
.registration {
background: deeppink;
width: 20%;
overflow: auto;
height: 80%;
float: left;
}
.main {
display: inline-block;
}
.footer {
background: blue;
height: 10%;
position: fixed;
width: 100%;
bottom: 0;
}
Here's a working demo.
I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE
I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}
<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.
What I have is a table that I would like to be placed in the center of the page with two banner ads on both sides of the table, the left and right ads coming as close to the edges of the page as possible with maybe a 5px margin. I already have that in place, but I would like the table to get as close to the ads as well. What is happening is that dependent on the screen resolution, the table is either too big, thus moving the ad to the next line, or if on an 11-inch screen the table is way too small.
I have taken a screenshot of my issue and can be found here:
.
The issue is, that if you look at the ad on the right, it is far away from the table, but that changes due to screen resolution. if it was a small monitor it would either be perfect, or would be too small and push the ad to the next line.
HTML:
<div class="left-ad">[adsense stuff]</div>
<table class="tl">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
<div class="right-ad">[adsense stuff]</div>
CSS:
.left-ad {
float: left;
width: 160px;
min-height: 100px;
padding-left: 10px;
}
.right-ad {
float: right;
width: 160px;
min-height: 100px;
padding-right: 10px;
}
table.tl {
display: inline;
float: left;
min-height: 100px;
padding: 0 10px;
width: 71%;
}
I have also updated my fiddle.
Here is a code, you need,(copy - paste it and see result in browser.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.left-ad {
float: left;
width: 94px;
min-height: 500px;
padding-left: 10px;
border:1px solid black;
}
.right-ad {
float: right;
width: 160px;
min-height: 500px;
padding-right: 10px;
border:1px solid black;
}
table.tl {
display: inline;
float: left;
min-height: 100px;
padding: 0 10px;
width: 71%;
}
</style>
</HEAD>
<BODY>
<div class="left-ad">[adsense stuff]</div>
<table class="tl" border = "1">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
<div class="right-ad">[adsense stuff]</div>
</BODY>
</HTML>
One way to approach it would be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {position: relative;}
.left-ad, .right-ad {width: 160px; height: 200px; background: gray; position: absolute; top: 0;}
.left-ad {left: 10px;}
.right-ad {right: 10px;}
table {margin-left: 180px; margin-right: 180px; background: blue;}
</style>
</head>
<body>
<div class="wrap">
<div class="left-ad">[adsense stuff]</div>
<table class="tl">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
</table>
<div class="right-ad">[adsense stuff]</div>
</div>
</body>
</html>