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>
Related
I have this theme: https://www.similaricons.com/demos/milano/about.html, And I want to reduce the persons shown below the "Be Creative." block down to 2. Now, when I remove two persons, the remaining stick to the left side. I don't want that. Instead, I want them both to be in the center when I have an lg resolution. Can you help?
What you could do is place the divs in single row in a table. Check out my example below:
#tbl_container {
background: red;
width: 100%;
}
#tbl_container > table {
margin-left: auto;
margin-right: auto;
}
.pic_block {
background: black;
width: 80px;
height: 100px;
float: left;
margin: 5px;
}
<!DOCTYPE html>
<html>
<body>
<div id="tbl_container">
<table>
<tr>
<td>
<div class="pic_block"></div>
<div class="pic_block"></div>
<div class="pic_block"></div>
<div class="pic_block"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
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?
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
**Please help me remove the white space between my images when rendering the below on a browser - FireFox in my case**
<body>
<form id="form1" runat="server">
<div>
<table style="border:0px;margin:0px;float:left; width:864px">
<tr>
<td style="width:809px">
<table style="margin:0px; border:0px; clear: both; border-collapse: collapse; width:848px; height:120px">
<tr><td style="margin:0px; border:0px; background:url(images/qualhisttop.jpg); width:560px; height:124px; background-repeat:no-repeat;"></td></tr>
</table>
</td>
</tr>
</table>
<table style="border:0px;margin:0px; clear:both; width:864px">
<tr style="margin:0px;">
<!----------------------------------------------------------------------------------------------------->
<!-- B E G I N N A V I G A T I O N -->
<!----------------------------------------------------------------------------------------------------->
<td style="border:0px; margin:0px; vertical-align:top; float:left; width:130px; height:532px">
<img src="images/tp_collagebasedrill.jpg" style="width:130px; height:78px; border:0px;margin:0px;" alt=""/>
<img src="images/meta_swooshbottom.gif" width="109" height="140" alt="" />
</td>
</tr>
</table>
</div>
</form>
</body>
OK so i have provided an example that may help you.`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
float: left;
}
#image-1 img{
width: 600px;
}
#image-2{
float: left;
}
#image-2 img{
width: 600px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
so if you wanted to stack them then they would be block level elements which are what divs are. Here is how to do that based on the previous example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my stacked images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
border: thin solid #003333;
height: 200px;
}
#image-1 img{
width: 600px;
height: 200px;
}
#image-2{
height: 200px;
}
#image-2 img{
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
just make sure that you set the height of the image-1 and image 2 divs to the same size as the image
i provided another code example that should work for you in a previous post. Try that and see if it works. also the reason for the space in between the images is that you must set the height of the image to be the same height as the container or div that the image is inside. So if the image is 400px high then you must set the height of the div to 400px as well. I hope this helps.
I have the following HTML.
<body>
<div class="header"></div>
<div class="navdiv"></div>
<div class="mainarea">
<p></p>
<table>
<tr>
<th scope="row">Name</th>
<th scope="row">Description</th>
<th scope="row">Created</th>
<th scope="row">Created By</th>
<th scope="row">Modified</th>
<th scope="row">Modified By</th>
</tr>
</table>
</div>
</body>
I need some help with the CSS to structure the page correctly.
I want the header to be 100% across the top which I can do.
But I want the "navdiv" to be a fixed 250px on the left of the page.
Then with the "mainarea" div taking the rest of the page to the right of the navdiv.
I then also want the table to stretch across the rest of the page.
I have tried several variations and some work however I can't get the table to stretch across the rest of the space, it just either jumps below the nav, goes too far past the other content or only sizes to the content within it.
Can anyone help?
This should work:
.header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none; }
Explanation:
I'm essentially using the standard two-column overflow: hidden trick to force the main content to stay in its own column (as opposed to wrapping under the nav). position: relative on the main content is to set it as the table's offset parent, so we can use width: 100% on the table to push it to the width of the main area.
The height on the nav, the background color, and borders are for demonstration purposes only.
On the hacks:
No other (modern) browser requires margin-left: 260px, as that is covered by the overflow: hidden (forcing it into two columns).
Still, at that point, the table seems to clear to the bottom of the nav (again, only in IE6). This is solved by removing any default clear (not sure that's necessary), and floating it to the right, so it doesn't take into account the size of the nav.
Have a go with something like this, (untested)
#header{
width: 100%;
}
#navdiv{
width: 250px;
float: left;
}
#mainarea{
width: 100%;
float:left;
margin-left: 260px;
}
table{
width: 100%;
float: left;
clear: left;
}
You can use the following code. I wrapped your code with another div with class wrapper. You can modify the values. The navdiv class has 250px as you wish. You have to modify mainarea's
width with percent. This is according to wrapper width. Just play a little and you will find what is the correct percent to fit with the wrapper's width.
<!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=utf-8" />
<title>stackoverflow code</title>
<style>
.wrapper {
width:900px;
height:400px;
}
.header {
width:900px;
height:100px;
}
.navdiv {
width:250px;
float:left;
height:100px;
}
.mainarea {
width:72%;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="navdiv"></div>
<div class="mainarea">
<p></p>
<table>
<tr>
<th scope="row">Name</th>
<th scope="row">Description</th>
<th scope="row">Created</th>
<th scope="row">Created By</th>
<th scope="row">Modified</th>
<th scope="row">Modified By</th>
</tr>
</table>
</div>
</div>
</body>
</html>
Try this: ?
.header{
width:100%;
overflow:hidden;
}
.navdiv{
width:250px;
float:left;
clear:none;
margin:0 10px 0 0;
}
.mainarea{
float:left;
clear:none;
overflow:hidden;
}
.mainarea table{
width:100%;
float:left;
clear:none;
}