How do you position social media buttons on the side of your content div?
Like here: http://adidasgolf.eu/home.aspx
Absolute positioning? But then the content div has to be positioned absolutely as well right?
This is what I have so far... without the social media buttons.
http://www.swiftgeckotech.com/golf01.html
Thanks.
The content div does not to be positioned absolutely to do so with the social icons. You are free to keep normal layout in the content div and put the social icons outside the content div, and position them absolutely. You may have to do some z-indexing to get that layered effect as well.
You most likely want to use position: relative; for the content DIV. Setting the content DIV to either position: absolute; or position: relative; will establish a new origin for the positioning of child elements… See this fiddle for a quick demonstration of how an absolutely positioned element behaves inside another positioned element.
However, elements with position: absolute; are removed from the document flow… They do not have "substance" in terms of pushing other content around on the page. You most likely don't want to set your content DIV as position: absolute; for this reason. If you were to add more content after that DIV, it wouldn't end up at the bottom of the page as expected, but would instead end up behind the absolutely positioned content DIV. position: relative; will work as expected however, and will give you a new coordinate system to absolutely position your social media buttons to it's side.
Related
I have a fixed container in a single page application and I want that one div inside this container overlaps the fixed container's boundaries and also vertically scroll with the contents of the fixed container. However, I'm getting the one or the other to work, but not both of them. I'm wondering if there is a CSS only solution?
There is a jsfiddle that demonstrates the issue.
The goal
[Example imaged removed due to missing reputation. It can be found here.]
The functional goal is to have a clickable marker next to an input control in a fixed positioned sidebar, where the customer can edit several properties of a business item. The marker should overlap the container's boundaries to stand out more. Based on this, there are at least five requirements I want to achieve:
The topmost container needs to have position: fixed, as the SPA in background can be scrolled in both directions
The content of the topmost, fixed container should scroll vertically if required but must not scroll horizontally
A box should be placed next to a target in the content
This box should overlap the topmost container's boundaries
This box should scroll vertically when the topmost container's content is scrolled (and therefore the box's target)
The basic structure is fixed container > content(s) > overlapping div. I'm aware of the fact that a combination of overflow and relative positioning will stop overlapping of an absolute positioned child. Therefore I've tried several variations of CSS rules and HTML markup - but in the end either the box was overlapping or does scroll with it's target. Your ideas on how to solve this without code behind are greatly appreciated.
The code
This is the (simplified) HTML markup:
<div class="sidebar-container">
<div class="sidebar-content-wrapper">
<div class="sidebar-content">
<div class="sidebar-content-main">
<!-- more content -->
<div class="overlap-container">
<div class="overlap-wrapper">
<div class="overlap-relative-container">
<div class="overlap-box"></div>
</div>
<div class="overlap-caption">Some text, the box should appear left to this element.</div>
</div>
</div>
<!-- more content -->
</div>
</div>
</div>
</div>
The topmost container is fixed:
.sidebar-container {
position: fixed;
// [ ... ]
}
It's child, the content wrapper has rules to enable vertical scrolling for the content, while the horizontal scrollbar is hidden:
.sidebar-content-wrapper {
height: 100%;
// content should be scrollable vertically, while horizontal scroll is not allowed
overflow-y: scroll;
overflow-x: hidden;
}
The box which should overlap the container is positioned absolute:
.overlap-box {
position: absolute;
left: -2em;
width: 3em;
height: 3em;
z-index: 99;
// [ ... ]
}
Stopping here will let the box overlap the fixed container. However, if the content is scrolled vertically, the box will not be scrolled as well, because it's positioned to the next positioned element, which is .sidebar-container. So let's add a position: relative to the parent element of the box:
.overlap-relative-container {
position: relative;
}
Quick and simple, this enables the box to scroll with the content of my fixed container. But it will no more overlaps the fixed container.
The full code can be found in this jsfiddle.
Lessons learned so far
any relative positioned element within an element that specifies one of the overflow CSS rules will clip absolute positioned children
searching Google and SO will show a lot of results, but I've found no solution for this particular problem. The only reference I found to my issue is in the comments of an blog post called How to make absolute positioned elements overlap their overflow hidden parent
trying to achieve complex layout scenarios with CSS only seems to harder than I expected
Disclaimer: I know that there is a working solution using onscroll event and JavaScript. And I'm willing to implement this solution to finally solve my issue. Nonetheless, a CSS-only solution would be much nicer IMHO and I want to cut this little Gordian knot :-)
To the best of my knowledge, the only way to allow child elements to be displayed outside of their parent container in this regard is to use
overflow: visible;
or, in your case:
overflow-x: visible;
on the parent container.
Unfortunately, you also want to be able to vertically scroll, which will take precedence over the visibility parameter regardless of the axis it is appended to. Forcing the children to be clipped to the parent dimensions.
Source:
https://www.w3.org/TR/css-overflow-3/#valdef-overflow-scroll
"This value indicates that the content is clipped to the padding
box, ..."
More information about this conflict/issue:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
https://www.w3.org/TR/css-overflow-3/#scrollable-overflow
If you find a CSS only workaround I'm sure the rest of us would like to know! But it appears you may have to have a non-scrollable sidebar or utilize a different design.
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
I am having some really weird problems with position:absolute. I have set the main title of my webpage to be position absolute, but when I resize the window, the text moves around. The really weird thing is that the tagline (the Bible verse) is also position:absolute, but it isn't having any problems. Any suggestions?
I'm guessing your screen resolution is 1920x1080? Looks like you've gone and positioned the element relative to the window, which only works if the window is that size.
Try removing the position: absolute and the right properties, and using float:right instead of float:left.
As for the tagline element, you made it position: relative and float: right. position: relative, here, does absolutely nothing.
I suggest adding the position: relative to the #logoWrapper:
#logoWrapper {
...
position: relative;
...
}
Thus its children with position: absolute will be positioned relatively to the #logoWrapper, not the body, as Kolink said.
I have a weird CSS problem. I have a banner that I need to position at the bottom of every page.
To this end I have set body to position: relative; and my banner to position absolute; bottom: 0px;
The problem is my banner positions differently on different pages such as the following:
http://www.plotsandhouses.com/node/1,
http://www.plotsandhouses.com/node/29,
http://www.plotsandhouses.com/node/30
The 'custom-page_closure_wrapper' div is what I am trying to position at the bottom of the pages. I can do this by setting position: fixed; but I don't really want the div visible at all times - only when the bottom of the page is visible or the user scrolls down to see it.
What am I missing?
To add on to Marc's answer, there is a CSS solution to it called the Sticky Footer.
The reason why your footer doesn't "stick" to the bottom of the page is because the height of the container where the footer is absolutely positioned in is not more than the height of the viewport. Therefore, by forcibly stretching the container to the full height, the technique ensures that the footer always stays at the bottom.
You can try adding the following in your CSS file:
body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
and removing the position:relative on your body tag.
I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.