So what I'm trying to accomplish is to have a div centered on the page (margin: auto auto;) with a navigation div just to the left of it.
The idea being the navigation div can be switched on or off (so may or may not be there). If its there or not should not interferer with the centering of the main div.
Below is an example
I've tried a few things
Wrapping both divs with a main div. Setting the main div to margin: auto auto and then setting both child divs to float: left. The problem is that when the nav div dissapears the entire thing shifts left.
Keeping the middle div margin: auto auto; floating the nav div left and then using margin-left but this changes when the page gets bigger or smaller.
Any pointers would be appreciated in the best way to do this. I was hoping to avoid tables.
JSFiddle link
Try this:
In your html:
<body>
<div class="encasing">
<div class="leftmenu"></div>
</div>
</body>
In your css:
html, body
{
width: 100%;
height: 100%;
}
div.encasing
{
top: 50px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 500px;
background-color: green;
position: relative;
}
div.leftmenu
{
right: 100%;
width: 10%;
height: 300px;
background-color: red;
position: absolute;
}
The important parts are:
To put your block containing the menu inside your center block
Make the center block have margin-left: auto; margin-right: auto;
Make the center block have a relative positioning
Have the menu have a absolute positioning
Make the menu have right: 100%
The idea here is to make the left menu use the position of the center block and then adjust itself. Right: 100% will put the right edge of the menu on the left edge of the menu.
In the end, a really good trick in css is that absolute positioned elements adjust themselves relative the the nearest relative or absolute positioned parent. :)
A few solutions I can think of:
Use absolute positioning for the navigation div. You probably want to give the body element a min-width to avoid the navigation div overlapping the main div when the window is too small.
Three-column layout, e.g. two divs with fixed widths floated to the left and right, and the content div between them. Inside the left-floated div, display your navigation div (or not). Alternatively, try display: inline-block on the three columns. The difference is in how small windows are handled (try it out). Again, you can counter undesired effects by setting a min-width on the body.
Completely fixed layout. Decide on an ideal screen resolution, and hard-code everything to that. This way, you can absolute-position everything where you want it, but the downside is that it won't look good on anything that deviates too much from the intended resolution. Especially mobile devices will see devastating results; you counter these with #media queries to adjust your layout to other screen resolutions.
You should also try to find a site that does what you want to do, and see how they did it (inspect HTML, CSS, and maybe Javascript).
Related
So I am trying to make banners which scroll with the page, but always will be like 40px left from my wrapper.
This is my site: http://joostmeijer.eu/ so you can see how my html works.
I seriously don't get how I can make the banner div fixed but relative to my wrapper.
You can create a <div> inside your wrapper div, for example <div id="fixedwrapper"></div>, and then style it like this:
div#fixedwrapper {
display: block;
width: 140px;
height: 500px;
position: fixed;
left: 0px;
background: black;
}
Here's a live example: jsFiddle Demo. Although you will need to use the CSS3 #media-queries to remove the banner when the window size is reduced since your website isn't responsive and the banner will overlap your content once the window size is reduced.
You are contradicting yourself in the question. If a div has a fixed position it will position relative to the browser screen, so it will never ever move.
Solution:
If you do not want to change your html and keep the banner inside the div, you can apply a negative margin. Make sure the overflow on your wrapper is set on visible (default value) for this to work. Also make the image wider to fill up the gap you will create on the right by adding the pixels from the negative margin to your #banner div's width.
#banner{
background-color: blue;
height: 100px;
width: 540px; /*40px added to compensate for margin*/
margin-left: -40px; /*move the dic 40 px to the left from the div*/
}
Here it is in JSFiddle.
Is this what you are trying to do???
The title and navigation bar of my website have absolute positioning so they will stay put while the images scroll under.
http://www.mikegarten.com/
I am trying to center the whole site horizontally.
I tried with this method but was unsuccessful.
I have tried to put my images into a table then centering that in a div, but then the horizontal images have empty space above and below created by the grid from vertical photos in the same row.
Is it possible to “wrap” this site, or do I need to use another approach?
There are at least three non-deprecated ways to center something horizontally.
margin: auto (explained at LearnLayout.com)
ugly hacking of position with a wrapper element (the question links to that)
even uglier hacking of position, this time setting position: absolute; left: 50%; margin-left: -<half the width of this box>
I recommend using the first method. You have to make sure the element you want to center has display: block, float: none and position set to normal or relative. Also it has to have limited width (less than 100 % of its parent), which is obvious.
You can set the left css property to 50% then add a margin-left of half the width of the element * -1, so to center your name element, set the left property to 50% and the margin-left to -132px;
#name {
position: fixed;
top: 20px;
z-index: 3;
left: 50%;
margin-left: -132px;
}
#navtext {
position: fixed;
top: 105px;
background-color: none;
width: 1000px;
left: 50%;
z-index: 3;
margin-left: -500px;
}
For your 3 columns you will need to place them in a wrapper div and set the width on it to your desired width and the margin-left and margin-right to auto.
You have made all the grid elements you have on your site position:absolute. That's why it won't center, because you've told it to be in an exact position. Also, it would help if you wrapped your grids in a wrapper div so you can position them as a whole.
Use width and margins. You can then use padding to space out the rest of the grid elements.
There is <center></center> tags in html, however I think this is outdated.
the other way is to center it using CSS giving it a width and margin:auto;
At this fiddle, you can see a header-bar with a title on the left and some text on the right. The problem should be obvious,
the header-bar does not scale with the full site, only with the visible part
The right-floated text sticks to the top of the header and is not on the same baseline as the title.
How can I fix this? Is there a better way to achieve what I want to do?
Clarification: With "the header does not scale" I mean that it does not have a width of 750px as defined in #header because the page is too small.
A few things:
No need for a float-clearing element. Just add overflow: auto; to the container.
Use max-width instead of width, as it scales nicely.
Try this: http://jsfiddle.net/PkkU8/7/
For 1) As Blender has mentioned, setting max-width: 750px should give you the flexible header width that you are looking for. This way, your header will never be larger than 750px, but can shrink if the window gets smaller than that size.
For 2) If you aren't adverse to it, you can absolutely position the right block instead of floating it. You'd be less prone to issues that float may cause, especially when you can guarantee the right block is going to be smaller than the header itself:
.fr {
position: absolute;
bottom: 0;
right: 0;
}
This also requires that its parent div be positioned either absolutely or relatively to work properly:
#head {
position: relative;
}
add padding to class fr
.fr {
float: right;
padding: 9px 60px 0 0;
}
I am trying to position divs nested within a centred wrapper so that they don't move when I adjust the size of a browser. The idea is similar to the Facebook homepage where all the divs stay centred and don't move relative to each other when the page is made bigger.
All of my divs are nested in this:
#header {
width: 750px;
margin: 0 auto;
}
What do I have to do to position the divs within? Is it something to do with positioning?
Sorry this is a bit of a vague explanation, please do ask for clarification!
Any help would be much appreciated, thanks.
You should probably have a clearfix class for that container div (See http://www.positioniseverything.net/easyclearing.html)
As for the inner DIVs, float: left; and an explicitly defined width is all you need to have them appear side by side.
As a rule of thumb: Don't use position: absolute. It is rarely the best way to achieve a layout effect.
If you do use absolute positioning, then set position: relative on the container so that it establishing a new positioning context and elements are positioned relative to its edges instead of the window.
#header {
width: 750px;
margin: 0 auto;
position: relative;
}
I used to have the same problem,
I fixed it by using the attr :
style='min-width:970px;'
i hope it helps
I am using the yui-grids css (irrelevant if you don't know what this is) with three columns. and I'm putting all the fancy design stuff on the left column and using z-index and relative psitioning bringing them in the center. and then putting all the important stuff like forms, inputs buttons, links and context in the center. Is this wrong. I've never seen this done so I was wondering maybe there is something I don't know! or am not considering. Should I just use one column?
I'm not totally sure what you're asking, so I'll give it a shot:
Columns
If you're going with a column layout, you should give just floating elements a go. Due to how floating works, a clearfix hack will be nessecary (link provided below). Clearfix allows child elements to be floated while maintaining the parent element's height and block nature. Clearfix can only be added to block elements.
For my example, we will be going with a 2 column layout -- one #content column and a #sidebar column -- you could do two, three or more.
For the parent div (that contains the #content and #sidebar elements), you'll need to add a class="clearfix".
For the content div, you'll want to float it to the left. For the sidebar div, you'll want to float it to the right.
Now, the CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
This should produce a 750px box with a content element on the left and a sidebar on the right with 50px in between both elements (750-(500+200) = 50).
Floating Module
If this isn't what you wanted, and were looking to produce a module element (lightbox, popup window, etc) instead, this is easy too.
First, create a div called #module. Put in your content into it. Let's say you want to give it a width of 500px and you want the height to be static at 300px. So we'd do this CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
What's going on here?
The #module element is being set to position: absolute. This means that it will be floating around the window, and is not constrained to it's parent element. We position it to be 50% from the left of the window and 50% from the top, so it gets in the middle of the window. Percent values are nessecary as they are adjusted when the window resizes. Without the margin, the element's top left corner will be 50% from the top and 50% from the left, so we need to use margin to move it back half of it's width and half it's height. This will allow us to have a box perfectly centered in the middle. The z-index is added to make sure that the element is on top of any other element, including , and other positioned elements.
I hope this helps.
Links
Clearfix: http://gist.github.com/550114
This kind of layout wouldn't be correct in my opinion.
The design of an element must be described in that particular element.