I have two divs: menu and content. Menu is fixed on the left, and content is centered. The problem is that with lower screen resolutions, the menu overlaps the content.
Here's some css:
#content {
width: 1000px;
min-height: 100%;
margin: 0 auto;
}
#menu {
z-index: 20;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
So, basically, I want the content to be centered with a left minimum of x px.
Is there an easy solution for that?
just set up a Wrapper div parent to the content div... and give the wrapper margin-left: 100px; or however much you want.. simple as that
you could use min-width
That should be the easiest solution. Otherwise post your code on http://jsfiddle.net/ so we can review it
Related
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
I have a fixed header image as my first div, but then I obviously want to have more divs/sections underneath it to complete the webpage.
However when I try and do this, I can still only see the header image and not the div position underneath it.
Anyone know why? Here is the JSFiddle: http://jsfiddle.net/s5atv9c3/
I tried using things like:
top: 0px; //for the fixed element
margin-top: 100%; //for the sub-divs in the container
position: relative/absolute; //for the sub-divs in the container
But none of them worked :/ So yeah all help is appreciated
The way you defined your .header block, it will have a height of 100% of the screen height.
If you want .packages to appear right below .header, set the top margin of .packages to be 100%.
Since the .header is fixed, you need to set the top offset and the z-index as follows:
.header {
top: 0;
z-index: -1;
}
See demo: http://jsfiddle.net/audetwebdesign/u8bt9wda/
You can do following things.
give fixed height to header
.header {
background: url("http://i.imgur.com/GZJVpxU.jpg")
height: 400px; //fixed height
position: fixed;
width: 100%;
background-size:contain;
}
Add padding of header's height into packages
.packages{
padding-top:400px;
}
It is because you give header position:fixed; So, next div position start from top:0; So, they hide back to first fixed div.
To make div visible give top position to second div and position:relative
.packages {
padding: 40px 0;
background: #FFFFFF;
width: 100%;
position: relative;
top: 500px;
}
Check Fiddle.
http://jsfiddle.net/s5atv9c3/2/
Try this:
html, body {
height: 100%;
position: relative;
}
.wrapper {
height: 100%;
}
header {
position: relative;
height: 100%;
}
Fiddle
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>
I am trying to create a HTML page slider, so I have my container div, then sitting on the outside, on the left I have a Previous Icon and on the right I have a Next icon.
My problem is, when I resize the window to smaller screens the icons move into the center of my container, I want them to stay position fixed to the outside of the container at all times when resized.
My container code: -
width: 960px;
margin: 0 auto;
clear: both;
overflow: hidden;
min-height: 449px;
Next and previous code:
a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png');
width: 55px; height: 112px; left: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
a.vehicleSliderRight {background: url('../img/slider_arrow_right.png');
width: 55px; height: 112px; right: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
Any ideas? cheers
You need to give the main container position: relative and then position the arrow elements inside the container with position: absolute.
This then allows you to manipulate where you put both arrows on the page using right: x , left: x , top: x , bottom: x. where x is any number or percentage.
jsFiddle: http://jsfiddle.net/LZG3R/3/
Source: Learn CSS Position in Ten Steps
You should try something like this:
.container{
width: auto;
margin: 0 auto;
clear: none;
}
a.vehicleSliderLeft {
float: left;
}
a.vehicleSliderRight {
float: right;
}
Fiddle: http://jsfiddle.net/EhdkP/1/
inside a main div you can keep each element in separate divs specifying the positions of each div specifying the widths in percentage
I have a sidebar and a content area. I just floated the sidebar to the left and the content area to the right. But I have problem when the screen size changes. There occurs a significant space between the two floats. I think it's due to the size of the image in the content area and since it's floated right. Hence I floated this content area also to the left. now the content area is not extending to the extreme right end of the screen. Is there any way to put the content area fit in the right portion without any space (just the space to divide the sidebar and content area is enough)?
If you need more explanations, please let me know.
Change your CSS to this:
.dashContent {
float: left;
margin: 10px;
position: relative;
top: 25px;
min-width: 80%;
}
.sidebarDash {
float: left;
height: auto;
width: 195px;
}
This will remove the space and also retain fluidity in the layout - Removed as the OP wants a fixed layout
Place .sidebarDash with adsolute position and give padding-left the same as sidebar width to .dashContent
Wrap these two in one main DIV as -
<div class="dashContainer">
<div class="sidebarDash"></div>
<div class="dashContent"></div>
</div> <!-- Clears the float with CSS -->
CSS -
.dashContainer{ overflow: hidden; position: relative }
.sidebarDash { position: absolute; left: 0; top: 0; width: 200px; }
.dashContent { padding: 0 0 0 210px; }
jQuery -
Insert this in <head> section of the document -
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
var sidebarHeight = $('.sidebarDash').height();
$('.dashContainer').css('min-height', sidebarHeight);
})
</script>
Instead of using float:right use float:left so both divs stay together, have a look on this fiddle
http://jsfiddle.net/FZZnk/
Let me know if this solve your problem
First, you need to use percent to all of the divs width.
second, you can make the both float to the same side (right or left), and use margin or padding in percent to make to space between these divs.
.dashContainer{ overflow: hidden; width: 100%; }
.sidebarDash { float: left; width: 20%; }
.dashContent { float: left; width: 80%; }
Now, because your left side bar has a fix width and float left, you can do this:
remove the float right, and add margin-left at the size of your side bar.
and don't forget to set the div to width: 100%.
.dashContent {
float: right;
margin-left: 210px;
position: relative;
top: 25px;
width: 100%; }