My page layout:
div for header : position: fixed
div for sidebar: float: left div for content: float:left
div for footer : position: fixed
the positions are set to be like so so that the footer and header are always visible no matter what point in the scroll bar the user is at. The sidebar however scrolls with the page.
the div for content contains a ui:insert so all the pages load in there.
now in one of the pages i want the content to be centered within the space allocated.
all the content of that page is placed in a div for this purpose.
What style do i have to use for the contents to always be centred horizontally no matter what size the window is stretched to. I can specify a fixed value for width of the div.
I cannot set the position to be absolute or fixed as it would ruin the design overall.
For a fixed width:
div.center {
width: 300px;
margin: 0 auto;
}
For dynamic width:
div.center {
width: 50%;
margin: 0 25%;
}
JSFiddle isn't working, but I'll get one up ASAP.
If I'm understanding correctly, the following should do the trick if the width of the div is specified
div {margin: 0 auto;}
Related
I know this may seem pretty stupid to some of you but I have a "page" div that is centered in the body using auto margins and I am trying to place a small rectangular div to the right side of it like the picture below and have this rectangle fixed in position so it scrolls with the page. any help would be appreciated
Here is a pic of what I am trying to do:
http://postimg.org/image/ixsgz3n2x/
One way to do it, is by using position: fixed for fixed side elements and placing them inside page container. Then you can move them to the right by setting their margin-left to container width:
.main {
/* page container ... */
position: relative;
}
.main .side {
/* side elements ... */
position: fixed;
margin-left: 410px; /* width of the .main */
}
Demo: http://jsfiddle.net/7xyb5g2o/
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???
If you take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/
You can see that both the sidebar and content elements stretch to the bottom of the view-port. This is what I want.
However, when given some content that stretches the page and requires the user to scroll: http://jsfiddle.net/p6qGg/
The sidebar and content divs cut off at the bottom of the view-port. I know why this happens, because 100% refers to the entire height of the parent element which in this case is the view-port, but when I change the markup to have a wrapper div surrounding the two elements and have min-height: 100% this happens: http://jsfiddle.net/Lr6k9/
Similarly, if the content is no longer long enough to not fit the view-port, the sidebar and content divs act as if they have no height assigned at all: http://jsfiddle.net/xsHHv/
So my question is how can I have the sidebar and content divs be the height of the view-port if the content doesn't stretch off the page, or have them the height of the content if it does?
The trick is to give your elements a huge padding-bottom, with a corresponding negative margin-bottom:
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
overflow: hidden;
}
#sidebar, #content {
float: left;
padding-bottom: 999em;
margin-bottom: -999em;
}
Here's your fiddle: http://jsfiddle.net/Lr6k9/4/
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).
I have never thought that writing a simple two column layout is so complicated using css....haha
What I want to do is the following:
When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static
The two columns should have the same height
My layout is:
<---------------container------------------->
<-------------------header------------------>
<-----sidebar-------><---------content--->
<------------------footer------------------->
<---End of container------------------------->
Here is my css file:
http://137.189.145.40/c2dm/css/main.css
#WorldContainer
{
width: 1000px;
margin: auto;
overflow: hidden;
}
.ContentColumn
{
float: left;
width: 500px;
overflow: auto;
}
<div id="WorldContainer">
<div class="ContentColumn">
Content goes here!
</div>
<div class="ContentColumn">
Content goes here!
</div>
</div>
That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.
EDIT: In response to you showing the example site.
Your problem is really simple.
All of your divs have a height rule of height: 100%;
When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.
Every container is specifying a percentage height so the result is a height of 0.
Give your outermost div a fixed height and the problem will be resolved.
Additional Edit:
If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:
#OutermostDiv
{
position: absolute;
top: 0;
bottom: 0;
}
Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.
You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.
You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.
You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:
#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}
and the HTML is:
<div id="container">
<div id="sidebar">
<!-- Sidebar Content Here -->
</div>
<div id="content">
<!-- Content Here -->
</div>
</div>
Hope this solves your problem. But display:table doesn't work in some old browsers.