I need help in fixing my right sidebar in Wordpress so that it doesn't move around when seen in different resolution sizes on the screen?
CSS for the right sidebar
#socialsidebar {
float: right;
position: relative;
overflow: hidden;
margin-right: 200px;
margin-top: 200px;
height: auto;
width: 194px;
}
CSS for the container/page
body {
min-width: 960px;
}
.container_12 {
background: #fdfdfd;
margin-left: auto;
margin-right: auto;
width: 960px;
}
You need to learn about position property of CSS.
there are few thumb rules that you have to take care of.
avoid unnecessary horizontal scroll.
try not to give static height, cause you always have infinite height at your disposal. use height:auto for your bigger containers.
give static dimensions to such containers which you know can be accommodated on most of the resolutions.
avoid inline css - try to define generic css as much as possible.
decide the possible resolution range of your app usage. and then begin writing CSS.
and most importantly, always cross verify your CSS(as you write it) on IE(biggest challenge).
most of the time, best way to go about it is that it should be simple and easily modifiable.
see you need to look at the entire screen as a co-ordinate system whose origin is at top-left corner and Y-Axis downwards.
this is one of the best articles on CSS-Position property. Go through it. It will help you in understanding how left,right,top,bottom work.
now, I've made a super simple sample, covering your needs. i.e. right navigation and it stays stable in any resolution.
Sample-fiddle
what you should notice in this sample is, extensive usage of percentage for width, height, top, left. and position attribute.
you can modify it accordingly. or take a reference from it. one more thing, you don't need to do position:absolute, I am doing it cause, i wanted to provide dimension to the container through its top, left,right bottom attribute, you can do it through percentage and position:relative.
Related
I was searching around for a way to vertically center a div in a container. I found a few different ways, but all of them seemed to be very "hacky".
My question is, why is there not just a css property, such as align-vertical that can simply be set to center to center the content? It seems like adding this to css would make so many things much easier.
I am assuming there must be a reason why something like this is not implemented, and I would like to hear if anyone has any idea why.
It's because how browsers traditionally work.
In a browser, by default, the content scrolls vertically. The viewport width is well defined (width of the device), but the viewport height can be one or two times the height of the device, or can even be infinite (as in infinite scrolling).
Traditionally blocks were meant to be horizontally oriented. You place a div and it's automatically occupying 100% of the width of the parent. But its height value is contrained to its content.
If you do
.mydiv {
background: red;
width: 100%;
height: 100%
}
Nothing changes, since divs have already 100% of width, and it can't calculate the height, since it doesn't know how far the viewport will go. You need to add:
html, body {
height: 100%;
}
to tell the browser to use the device height as the 100% value.
That's why horizontal center is easy: you know what the boundaries are, and how to center the element. But vertical center is more complicated, that's why (before flexbox), you need to resort to absolute positioning or hacks.
Flexbox allows you to render content horizontally or vertically, so it's prepared to handle centering along two axes.
If you want to read more about this, I suggest the spec:
Visual formatting model
Visual formatting model details
#outerDiv{
display:flex;
width:100%;
height:200px;
background:#ccc;
align-items:center;
}
#innerDiv {
background:#aaa;
width:80%;
margin:0 auto;
}
<div id="outerDiv"><div id="innerDiv">Hello</h1></div>
Run the script and the div remain in the center.
You can mix and match the combination like this.
Earlier you need to play with the height of the parent container and self height.
But with flex it becomes easy.
If I'm trying to center an element I do the following -
*parent-item {
margin: 0 auto;
width: 100%;
display: block;
It's important to define the width of the element you are centering.
I made this code that makes a responsive height, it adjusts according to the size of the viewport. (Run the snippet and resize the screen).
Whereas the html and body have a height: 100%, I set up a basic structure with 3 divs and I was handing this height: 100% between them (as you can see in the snippet). After that, I gave a position: absolute and top according to the size of each.
Well, as I assign attributes the top for each div in "hand", I got the feeling that this may be a quick fix/MacGyver on it, because as in the later, there are more divs, I have to do this calculation for top again. I think that have better ways to do this...
Thus, in what other ways I can do this? The code that I did can be considered a quick fix/MacGyver?
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.div1{
position: absolute;
width: 100%;
height: 10%;
background: red;
}
.div2{
position: absolute;
top: 10%;
width: 100%;
height: 75%;
background: green;
}
.div3{
position: absolute;
top: 85%;
width: 100%;
height: 15%;
background: yellow;
}
<div class="principal">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
The answer to whether what you're doing is a good solution (which I will interpret as concise, not overly complicated, and as compatible as possibe) depends on what exactly you're trying to do. Because you don't provide much detail on that end, let me give you the rundown.
The generally best approach (by the definition above)
In most cases, you won't need any special properties and can simply set the height or min-height of your three containers to the appropriate value, since their parent (body) already has a height of 100%. Because everything is underneath each other, there is no need to use the position property in any way.
Because of the way html works by default, these containers will retain their size until their content will require more space; then they will expand to accomodate the content. This is a feature, not a bug.
If you want to prevent this, set the overflow to hidden or scroll, which will help retaining the original container size (though in case of scrolling, scrollbars might mess with your plans).
Alternative solutions
Sometimes layouters get weird ideas of what you need to put on a webpage, and weird ideas might require weird solutions. Let me try to come up with a list of options to choose from:
The approach you took works if you need to split the viewport into exact shares of fix values, disregarding the container's contents entirely. It's compatible with any relevant browser by a long shot, but it will (assuming you handle the overflow so it doesn't stretch the container) likely result in cut-off content on extreme screen sizes (if you have primarily text content) or aspect ratios (if you have primarily image content); to be honest, probably both - but if you're working on a game, for example, maintaining a relative container size can easily be more important than their contents
Flexboxes will "only" give you a benefit of stretching the content over the whole screen if you're desperately trying to avoid setting a height, but it shouldn't result in any unforeseen errors, aside from the compatibility issues. As an additional bonus, you can rearrange the containers with the order property, which none of the other methods will accomplish.
Using absolute-positioned elements, you can entirely disregard height attributes and just set both top:0 and bottom:0 (while having a relative-positioned parent) to stretch a container over the entire height, then position containers inside on the top and bottom the same way. Not many cases in which this is more useful than the above two come to mind, and you won't like fixing any problems you encounter on the way, but if you're developing for browsers thathave issues with overflow properties, you could look into it.
The vh unit, apart from suffering from compatibility issues about the same, can be used, but don't pose any actual benefit over using percentage values. They are used to size elements relative to the viewport dimensions, which your percentage solution does just the same for this specific use case.
You could use a table, though that's commonly considered bad practice for various reasons and will on top of that be the most complicated solution of all of these, so I won't go into it.
So, all in all, there are many ways to accomplish what you want (and I possibly even missed some), and without providing info about the exact nature of what you're trying to do, there can be no exact recommendations other than a quick summary of what I wrote above: If you plan on putting content in the top and bottom container and you can't use the topmost solution, flexbox will work the best for you; if you need the containers to take up precisely a certain percentage, go with your original solution; and only if both aren't suitable, expand your search to the other options.
Today flex can make this really easy:
examples to run in full page:
html, body {
height:100%;
/*
}
next can be declared only for body but won't hurt if both html/body
body {
*/
display:flex;
flex-flow:column;
}
main {flex:1;
}
/* makeup */
header, footer {
background:tomato;
padding:1em;
}
main {
background:turquoise;
margin:1em;/* it can even stand away */
}
<header> header no need to set an height </header>
<main> let's fill remaining space</main>
<footer> footer no need to set an height </footer>
or use many div
html,
body {
height: 100%;
}
body {
display: flex;
flex-flow: column;
}
div {
flex: 1;
}
/* makeup */
header,
footer {
background: tomato;
padding: 1em;
}
div {
background: turquoise;
margin: 1em;/* it can even stand away */
}
div.autoH {
flex: none;
margin: 0.25em 0em;
background: brown
}
<header>header no need to set an height</header>
<div>let's fill remaining space</div>
<div class="autoH">let's fill only my needed space</div>
<header>or use header's / footer's properties</header>
<div>let's fill remaining space</div>
<footer>footer no need to set an height</footer>
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
So I've read a couple of CSS guides and understood most properties, but I still can't position elements PROPERLY.
What I mean by properly: right now I position stuff using specific values ofmargin, margin-right, margin-left, padding, (margin-left:50px), etc... What this means is that my divs are all positioned properly when I view it in my own computer with a specific resolution.
So I hope this isn't too general, but how do I position stuff in a way that they will be in the same relative spot in the page, for every resolution/page size, no matter who and what views it (I guess if it's the same for 99% of cases it's also a good start).
A bit more specific: which properties can I use to position elements in the manner I described?
Here's a link of one of my little projects which are badly positioned (it's all good in my screen, but not so much on others:
http://kash.hostzi.com/utopia/minesweeper.html
check out #gameTable's css for example - I wanted to center that and did it in a horrible way.
In your linked example, it looks like you want the gameboard to be centered. If it's a block-level element, such as a div or table, and you want to center it, you can use this on the element itself:
margin-left: auto;
margin-right: auto;
If it's an inline element, and you want to center it, you can use this on the parent element:
text-align: center;
If you weren't trying to center it, but just want to have the position scale with the screen size, do something like this:
margin-left: 10%;
margin-right: 10%;
If you want the position to scale with the font size, do something like this:
margin-left: 10ex;
margin-right: 10ex;
You can start using percentages. Like:
margin-left: 20%;
margin-right: 20%;
and it will be margined depending on the window(the element in which it is) size.
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;