How can I achieve the following effect without the use of a table?
Example:
http://enstar.nl/example.php (The example may not be visible at the moment, the nameservers should have been changed, but my hosting isn't that fast in updating them. Should be working later today. I apologize for the inconvenience)
All methods require a header and/or a footer. I don't want that.
What I want is the following:
Pure CSS, no tables
2 columns, fixed fluid (in that order)
if the content hasn't reach the bottom of the viewport, than extend the columns to it. Else extent to the content (so like a sticky footer)
A table at 100%x100% does this naturally. But I really don't want to use a table for this.
Any ideas?
EDIT:
Current HTML
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="navigation" valign="top" align="left">
</td>
<td id="content" valign="top" align="left">
</td>
</tr>
</table>
to set a two column there are a couple of options if you don't want to use tables
<div id="wrapper" style="height: 100%;">
<div style="background-color: green;">
<div id="leftCol" style="float: left; width: 200px;">testing</div>
<div style="background-color: red; margin-left: 200px;">
<div id="rightCol" style="height: 900px;" >testing testing testing testing testing testing testing</div>
</div>
<div class="clear"></div>
</div>
</div>
As long as the text inside the rightCol is longer than that in the left col (which can be handled by a min-height on the element) then you shouldn't have any problems with it scaling.
This also nullifies the need for the Javascript to set the second width. The reason is it is set to the width of the parent div which by default is 100% since you margin the red column left 200px it slides the display section over so you can see your left column.
Related
How to divide the html page to fill up all the window with a top panel with the minimal height necessary, a left panel and a right panel with a fixed width?
I tried as follows, but the right panel takes more than 100px. It works if I remove the top header. Also, using height: 100% is not correct, as the top header takes some space also.
<table border="1" style="width: 100vw; height: 100vh">
<tr><td colspan="2" style="width: 100%">top</td></tr>
<tr>
<td style="height: 100%">left</td>
<td style="width: 100px; height: 100%">right</td>
</tr>
</table>
If you are determined to use a table to perform your layout, the following may help with your specific issue.
At the moment, you are specifying that the top row should take 100% of the available width. In this case, it will take the available page width, not the width of the table.
To rectify, simply remove the width: 100% on the top row and allow the row below to define the width of the table based on the settings on the left and right columns:
<table border="1" style="width: 100vw; height: 100vh">
<tr><td colspan="2">top</td></tr>
<tr>
<td style="height: 100%">left</td>
<td style="width: 100px; height: 100%">right</td>
</tr>
</table>
However, now the left column will automatically take the available width, which will also cause your top row to expand automatically. The right column will now be the fixed 100px you requested.
A note on laying out content
Modern HTML5 and CSS3 bring a plethora of powerful layout methods for content. I strongly encourage you to investigate these for laying out a web-page as opposed to relying on tables.
Although tables are sometimes necessary (I'm thinking laying out emails for older-Outlook versions), most of the time you can rely on modern techniques to achieve the same.
A Google of HTML5 CSS3 layouts will provide a plethora of useful content, but a starting point could be W3 Schools which have a good basic introduction.
www.SportsAntiques.com
When I look at my home page on my laptop or android it looks fine. But when I look at it on large monitor it's all skewed to the left. Can someone take a look at my source code and tell me where the problem is.My site above. I built the site with FrontPage 2000 and have shared borders if that makes any difference. thanks so much
In the HTML, there are two <div> elements with the id="fb-root" that have style of width: 987:
<td valign="top" width="24"></td>
<td valign="top">
<div id="fb-root" style="width: 987; height: 48274">
<div id="fb-root" style="width: 987; height: 58405">
<p align="center" style="margin-top: 0; margin-bottom: 0">
For large screens, that width constrains the width of the center column. Remove tbose constraints and the column will expand to fill the large screen.
So I have these tables that I'm trying to make for an email template, and these three columns which have a float property in order to stack them one bellow another when I resize the window.
The thing is that while it looks good at maximum size and minimum size (at maximum they are next to each other, at minimum they are one bellow another, as intended), in between the third column moves below the first while the second remains next to the first, and after further resizing the second column then changes it's position below the first column and the third column moves further away from the second one. What I wish to know is if there is a way to make them move in a certain order, like the first one to move below should be the second column, and only after that the third. Or even better would be if they moved all at once!
Also, I am very curious as to why are the texts moving upward inside the cells when I give them the float property, me preferring them to remain vertically aligned in the center, as they were before making them float.
Note: because this is intended for emails, I had to use all my css styling inline as the server I use does not recognize the style tag. Also the max width for the table is of 600px
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr>
<td class="placeholder" style="width: 180px;float:left;">
Description:
</td>
<td class="links" style="width: 275px; float:left;">
very long link
</td>
<td class="buttons" style="width: 85px; float:left;">
button
</td>
</tr>
</tbody>
</table>
You need to enclose table cell item (placeholder, links and buttons) in a different Html.
See/try the following code:
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr>
<td>
<div style="width:180px;display:inline-block" class="placeholder">Description:</div>
<div style="display:inline-block">
<div style="width:275px;display:inline-block" class="links">very long link</div>
<div style="width=85px;display:inline-block" class="buttons">button</div>
</div>
</td>
</tr>
</tbody>
</table>
Items are in one table cell, so the table has one column, with the same width.
The description item is enclosed in div with display:inline-block.
Both links and buttons are enclosed in another div with display:inline-block.
When You resize window the second div (that enclose links and buttons) wrap and take links and buttons togheter on the second row.
If the table has more columns you need to enclose all columns in that way.
I have been trying to align 2 different iFrames on a page, one to the right and another to its left. The iFrame to the left needs to have a width of 25% and height 100%, whereas the iFrame to the right needs to have a width of 75% and height 100%. They are placed inside a table having a height and width of 100%. I tried running my code on JSFiddle.net and it more or less looks the way I would have expected, however, it does not appear the same in my application (it definitely is not aligned 25%-75%). Here's a screenshot.
Here's my code snippet for the table:
<table height="100%" width="100%">
<tr style="height:100%">
<td style="width:25%">
<iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
</td>
<td style="width:75%">
<iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
I tried replacing '%' with pixels (px) to set the width of both tags, however, it seemed to mess the page up a bit and didn't seem to solve the issue.
The above code is only a part of the entire ASPX page, and I am sure nothing apart from this code snippet is causing any problems with the alignment of the iFrames. I have tried different ways but hasn't helped. Any help will be highly appreciated.
Alright, I sorted the issue myself. Basically I changed the <td>'s to <div>'s and added a float:left attribute to both iFrames and that seems to have sorted the issue:
<table height="100%" width="100%">
<tr>
<td>
<div style="width:100%">
<div style="width:25%; float:left">
<iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
</div>
<div style="width:75%; float:left">
<iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>
</div>
</div>
</td>
</tr>
</table>
I've got a site that I am working on that has greebles on the top left, top right, bottom left and bottom right corners. The full width of this is roughly 1100px. The actual content area is within the 960px layout.
I want the site to be properly centered right down to 960px, with the extra imagery disappearing out the right and left, but not causing any horizontal scrolling provided it is over 960px.
All four images are seperate files (can't really join them) and there is already a background image. Did I mention that they are added through CSS, rather than as in-file images?
Thanks!
Edit: This really has to work in IE6. Not my choice :(
You can use overflow: hidden in the CSS for your body tag (or whatever container tag you have your main content in) to prevent scrollbars. Some browsers allow you to constrain that just to horizontal or vertical content (-ms-overflow-x and overflow-x in your case, because you're dealing with the horizontal overflow; there are corresponding y styles). I think these are / are going to be part of CSS3, according to this link.
I'm sorry folks, but the only way I can see this working including IEs 6 and 7 is using tables.
Working example: Here
The "Greeble" text (I don't really know what a greeble is :) distorts the resizing somewhat, that'll disappear when the columns have background images only.
Issues: The columns need to contain something to be rendered by IE. The I built in will prevent the complete disappearance of the right and left columns. You will have to find a way around that, maybe with a 1x1 Pixel image or something. You will always have to have some content - even if just 1 pixel wide - in all columns.
Relies on: Tables with an unspecified width rendering the way they do. I think this is pretty reliable, tough.
Tested in: IE 5.5 and greater, Firefox
To anybody who dares downvote this because tables are evil: Find me a better, CSS-based solution that works in IE6 as well, and I will gladly remove mine.
HTML: No separation between markup and CSS, no semantics, just the working prototype.
<body style="margin: 0px">
<table style="width: 100%; height: 100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td style="background-color: orange; height: 50%; color: white">
Greeble top left
</td>
<!-- The content area -->
<td style="width: 960px" rowspan="2">
<!-- This is important, serves as min-width replacement. -->
<div style="width: 960px; text-align: center">
I will always be 960 pixels wide
</div>
</td>
<td style="background-color: blue; color: white">
Greeble top right
</td>
</tr>
<tr>
<td style="background-color: blue; height: 50%; color: white">
Greeble bottom left
</td>
<td style="background-color: green; height: 50%; color: white">
Greeble bottom right
</td>
</tr>
</table>
</body>
I think I've worked out a ludicrously simple way of doing it: Add an empty div for each corner element, position it relatively and then give it a negative (or high positive for the rhs) margin - seems to work in IE 6 too.
Thanks for all the ideas though.
Not sure if you solved this, but I think it is possible using background images. If you layer the images on top of one another, without specifying a width for their containing divs, you should be able to pull it off. Here's the basics:
<body style="background: url(body-bg.png);">
<div style="background: url(greeble1.png);"></div>
<div style="background: url(greeble2.png);"></div>
<div style="background: url(greeble3.png);"></div>
<div style="background: url(greeble4.png);"></div>
<div class="wrapper" style="width: 960px;">
<p>Main Content Area</p>
</div>
</body
I think you'd need to use a bit of JS to position each of the greeble background images depending on the size of the image and the viewport, but it should be possible.