I'm creating a website which will contain one page with absolute positioned divs. Technologies I use is CSS layout, Bootstrap framework, angular 2.
Problem that I'm now facing is that I need to place some divs absolutely. They are placed within the container. Structure looks like this:
<div class="container">
<div class="myowncontainer">
... some stuff at the beginning ...
<div class="absolutecontainer col1 row1">
... content ...
</div>
... more of the absolute containers ...
</div>
</div>
CSS:
.myowncontainer
{
width: 2600;
height: 700;
}
.absolutecontainer
{
position: absolute;
}
.col1
{
left: 5px;
}
.row1
{
top: 5px;
}
... and other rows and columns ...
Before you ask why I'm not using bootstrap features to build a table, the col1 and row1 can't be displayed as table. If you are familiar with sports, I need to show the double KO system, each of absolutely positioned divs is one match. It will not form a table by any means.
So, what makes it hard: when I place the divs absolutely, they will overflow out of the container div. I would like to position them WITHIN the container. I have tried also some relative positioning, but failed. There was always something that made it very hard or imposible to position the divs correctly.
Actual problems:
in chrome the myowncontainer is not of the specified width and height, the absolutely positioned divs are touching the edges of page even though the myowncontainer is bigger to provide some space around it. other browsers work fine (firefox, edge).
absolute positioning has the 0,0 point in the upper left corner of the PAGE, not the parent DIV. So the absolute divs are overflowing the container to the top and left. Maybe the relative positioning should be used, but how do I specify relative to WHAT? I mean, angular 2 places some tags around a code snippet when this snippet is also a component. I don't want to place it relatively to this generated tag.
what's the worst, in android's chrome the content is not shown at all. The absolute divs are completely missing. I haven't checked other browsers, makes no sense to me when the most commonly used browser is not working at all.
Of course I know the responsivness of such page will be bad, but that's what users have to accept, this is not a common page, it is a big overview that HAS to be placed exactly as I want it. It is also the only page in whole system that won't be responsive. So if you know how exactly should I place the divs, don't care about the responsivness... or if there is any way? I don't think so :) I believe everything can be solved by one simple trick, probably the relative positioning... but how? Site is online (still not used) and I can send URL privately if needed.
Thanks to everybody in advance.
Related
This question already has answers here:
How can I wrap text around a bottom-right div?
(9 answers)
Closed 7 years ago.
I would think this would be a common issue, but my search for a solution leads me to believe it may not be possible. I simply want to place a div in the lower right corner of its parent div, yet have the text in the parent div flow around it.
Although I've found many posts addressing this question, I have not found one that appears to work. Most of these posts were several years old, which gives me a sliver of hope that there may be a way to do it after all with HTML 5?
I should have mentioned that this is in pursuit of a responsive design, so a static solution will not work.
Here's what I'm attempting to do: http://test.scoe.net/rfox/usalResponsive6/indexTeacher.html
I have a background image in the lower right of the div. I would like the text within this div to not flow across the image, but around it instead. I thought I'd be able to place an empty div (represented by the purple rectangle in the referenced page) in the lower corner to prevent text from flowing across the background image, but I can't seem to find a way to accomplish this.
Didn't see a demo there - or anyone doing it with a pseudo element (which would be a bit more semantically correct because it's styling and not content) so let me just post that then :
Demo
<div id="parent">
<div></div>
<span>text</span>
</div>
#parent:before {
content: '';
height: 35%;
float: right;
}
#parent div {
width: 130px;
height: 65%;
float: right;
clear: right;
}
When it comes to responsiveness in this particular case there are two aspects. First would be the background but since that isn't responsive itself for the most part and positioned at the bottom right, some width and height may have to be set along with the break points in the media queries.
Another form of responsiveness, automatic adjustment to the amount of text, is a tricky one that doesn't seem to be solvable without JavaScript. When height is left to auto, the floated elements will not inherit any height. This causes for the effect to not render. And because children cannot refer up the tree to relate to their parent's unknown height there isn't a pure CSS approach available.
So the example still has a fixed height and a minor bit of JS that's commented out but which should come close to making it adapt. It's a workaround but it's all current browser support will allow.
And now what can be used in the future!
Caniuse
The image itself could be cropped and saved as png, leaving transparent space around it. Then we can apply shape-outside and shape-image-threshold rules to it. With the current spec any text will then wrap when it's floated. Browser support it still limited at this point but it's very promising. The great thing I noticed about it is that when the floated element is given top margin, the text will start to flow above it! This does not occur in the example at the top of this post, it will only make the block appear longer (and empty as well). Because of this, a minimal bit of vanilla JS can make it fully responsive by only setting margin and without using an additional pusher element :
Example
<img id="image" src="image.png" alt="">
#image {
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: right;
}
window.onload = placeBottom;
window.onresize = placeBottom;
function placeBottom() {
var parent = document.getElementById('parent'),
image = document.getElementById('image');
image.style.marginTop = 0;
var space = parent.clientHeight-image.clientHeight;
image.style.marginTop = space + 'px';
}
It's actually very straightforward :
http://www.html5rocks.com/en/tutorials/shapes/getting-started/
Credit for the latter part to Paulie_D for putting me on the track of CSS shapes and later recognising that images used in this way are subject to same domain policy. Meaning they have to be hosted by the site itself or when linked externally, CORS restrictions will need to be relaxed.
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
I am working on a CMS template and try to find out if this is possible at all. I was not able to find anything on the net, maybe I just used the wrong keywords.
Have this model given:
http://img833.imageshack.us/img833/4979/alignmentmockup.jpg
<div> #1 is a fixed 'banner' container aligned left.
<div> #2 is a another container with a fixed width. It is supposed to be centered using the whole site as measurement (scale #2) but shall not overlap with <div> #1 (scale #1).
Problem: when the browser window is too small (e.g. resized, mobile browser), the container overlaps with the <div> #1. Depending on their z-index, one of them is on top of the other.
Approach 1: Both container on the same z-index. <div> #2 has margin:0 auto;
but that does not stop them from overlapping.
Approach 2: Both styled position: relative; float: left; z-index: 10
but <div> #2does not align to the websites center anymore.
Since this is a resticted template back end I am working on, I cannot add additional containers as I want. I only have access to the portion of the HTML-file right between the <body> and the beginning of the websites functions. So I can only add separate <div>s (like <div> #1) but cannot cascade them with the rest of the website (like <div> #2).
Any hint for another approach appreciated!
Your problem is that CSS doesn't have min-margin that you could set on div2 with the width of div1. I remember reading an article about this not long ago and found a good solution by Ron Adair:
http://www.iamron.com/downloads/min-padding.html
The full article in which a more complex solution is presented. Ron then comments his easier way to get the same result:
http://buildinternet.com/2009/10/purely-css-faking-minimum-margins
This website http://www.elkaniho.com/ has a CSS layout which is what i want, you see, the divs stack on top of each other, not on a precise grid, but just at the bottom and on the side.
And when you re-size the browser, they all re-adjust perfectly?
anyone know how i can get the same layout like at elkaniho.com or what type of layout this is called?
There is also a neat jQuery plugin called Masonry that can deal with div's of varying width and stacks them up as tightly as possible. Depends on your content.
That's just a six column layout. Easily done with 6 divs:
<div id="container">
<div class="column">one</div>
...
<div class="column">six</div>
</div>
As a fluid layout:
#container { overflow: auto; }
div.column { width: 16%; float: left; }
You can of course fix the widths too.
Each column then has several divs which do what divs (and in fact any block element) do: they stack top to bottom.
The effect you are speaking of is created using javascript. If you look at the source code, you will find a link to a javascript file called funciones.js which includes functions called cajas and cajasInterior that are responsible for this effect. Also note that they are using jQuery.
The functions:
Figures out the maximum number of columns based on the body width, box width and margin
Sets all divs with a class of box and boxInterior to have absolute positions and set their width
Goes through each box and calculate the left and top positions.
I would contact the webmaster of the site and ask permission to use this script and change it to fit your needs.
Compare these 3 URLs (look at the top navigation bar in each case):
http://fast.kirkdesigns.co.uk/blog
as above but with the url fragment #navigation
as above but with the url fragment #node-2655
Note, that the only difference is the URL fragment on the end.
The first two pages display absolutely fine (in Firefox at least). It's the third one where the problem lies. The fragment #node-2655 pushes the top navbar off the top of the screen. When you then scroll back up to the top of the page, the navbar has been cut in half. This happens when using any URL fragment that causes the navbar to be out of the initial viewport when the page is first loaded.
So, how can using a url fragment affect the css layout like this?!
THE SOLUTION:
as suggested below, removing the overflow: hidden on the container element that held the navbar fixed the problem. I'd love to understand why though!
Remove the overflow:hidden on #main in css_75afd7072eaf4096aaebf60674218e31.css
I'd say it's a rendering bug in FireFox as it's fine in Opera. There shouldn't be anyway an anchor would change the CSS like you say (unless you are using jQuery or something).
I am having this problem too, and think I can see what is happening.
The "column" block with the massive (5678 pixel) margin and padding makes that block very tall. In browsers other than Firefox, the positive and negative values cancel each other out, but FF really does make it that tall - kind of.
FF also knows the two cancel each other out, but seems to look at the 5678px padding and decides the column block is poking out the bottom of the #wrapper block. This is overflow - and with overflow set to auto on #wrapper, you see the true size of #wrapper with a scroll-bar down the side.
With overflow set to hidden, FF takes away the scrollbar, but still seems to scroll the contents of #wrapper so that the item the fragment points to is at the top of the page. This is normal behaviour for fragment links in scrollable blocks, but since there is no scrollbar, you cannot scroll the content back down again, hence it looks like the layout has been effected by the fragment.
So in short, I suspect that FF is operating an invisible scrollbar in this example. That could be considered a bug, but it is probably correct behaviour. Being able to scroll the content up and down inside a non-overflowed fixed-sized block using URL fragments, is a technique that can be used effectively to implement image "sliders" that work even in the absence of JavaScript.
Hope that helps. This has been puzzling me for years, and this explanation suddenly struck me out the blue. My current workaround for this is to use jQuery "scroll to" plugin to scroll the whole page down to the fragment, as this seems to prevent the contents of #wrapper from scrolling internally.
You can also take "display: hidden" off #wrapper, but your page then ends up half a mile long.
I'll just point out that there may be some weird inheritance from the 30+ stylesheets linked to in the head. There may not, either, and it's probably a rendering bug (possibly related to :target styling) that Dan suggested. I just felt it worth pointing out that if you've got more than thirty stylesheets, you likely to start seeing some weirdness, whatever else might happens.
The reason is the column with the large padding has expanded it's container, but the expansion is then hidden but overflow:hidden; but with the use of the fragment it is being scrolled into the position of the fragment, effectively chopping off anything above that. You can use javascript and set scrollTop to 0 and it scroll it back to the normal position.
Basically a wierd edge case which browsers do not seem to handle very well.
Sorry this isn't an "answer," tho it is a response to the other comments here. This problem is just flabbergasting. It is very easy to isolate (i.e., has nothing to do with number of stylesheets), and doesn't have a proper "solution," as there is no way to achieve the desired rendering.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
margin: 1em auto;
width: 40em;
}
#wrapper {
overflow: hidden;
position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
float: left;
margin-bottom: -5678px;
padding-bottom: 5678px;
width: 50%;
}
#footer {
background-color: #eee;
padding: 1px;
text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li>Jump to P1</li>
<li>Jump to P2</li>
<li>Jump to P3</li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>
Just as a side-note, the above technique is generally used to provide flexible-width mulit-column layouts. This is probably becoming less important these days as fixed-width layouts are becoming a lot more comment - browsers are able to magnify the web page to see small text, and fixed-width makes it a lot easier to control the typography of a page, e.g. set the width (in ems) to display the ideal nine words per line regardless of what font size and magnification the user chooses.
Sorry if that does not sound like an answer, but it is basically suggesting to discard this old model and consider moving to fixed-width columns (which is a whole new subject).
I was able to solve this with some javascript to scroll the body to the position the overflow hidden element was scrolled to.
setTimeout(() => {
let intendedScroll = document.getElementById("fragmentfix").scrollTop;
document.getElementById("fragmentfix").scrollTop = 0;
window.scrollTo(0, intendedScroll);
}, 0)