I'm using a large background in <body> tag and I want to make a container div with a width of 960px.
I want the container div to be positioned 15px down from the top, I guess i have to use position:absolute.
My dilemma is; the rest of the div's inside the container have to contain the same position or i could continue this like an normal 960px wide website?
Sorry for my bad english.
Please help me!
This should give your container a 960px width and center it with a 10px top (and bottom!) margin.
#container {
width: 960 px; /* set width for container */
margin: 10px auto; /* 10px top and bottom, center screen */
}
You don't have to use absolute positioning. A simple
body {margin: 0; padding: 0}
#container {width: 960px; margin: 15px 0 0;} /* or margin: 15px auto 0 */ if you want it centered
will do :)
You do not need to use position:absolute; what that does is puts a div in a specific place on the page irrleevant of broswer window size which isn't what you want in this instance,
What you need is simply a margin-top:$$px;
If you are using an id use the # identifier:
#container {
margin-top:15px;
width:960px;
}
If you are using a class use the . identifier:
.container {
margin-top:15px;
width:960px;
{
All divs within this tag can be written and position as they normally would, no extra padding or margins necessary.
Related
I have 3 div's:
.left, .right {
width: 30px;
resize: none;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
max-width: 960px;
margin: 0 auto;
}
What I want to achieve is that only the middle one resizes when resizing the browser. In the left and right div there is an image that is part of the design.
When I make the browser smaller, the left en right div will narrow at one point and it seems that it is getting pushed into the center div. This makes the content of the center being pushed down. How can I make sure the 2 div will stay #30px?
Strange thing is, in the jsfiddle it does work...
jsfiddle
The issue is with the <img /> element you have in the header. When you hide it you can see that it no longer interferes with your layout.
The problem is because the <img /> element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc to constrain the width of .center, and float it to the left, too:
.center {
width: calc(100% - 60px);
}
Alternatively, you can give .center a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.
.center {
margin: 0 30px;
}
Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc() method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.
Try setting the horizontal margin for your center div to the known width of the left and right divs:
.center {
max-width: 960px;
margin: 0 30px;
}
I made a template with 2 columns with CSS like this picture.
The main div is main. It has 2 dives inside itself. DIV sider has a background-image. And I want to show it always. Now, I have 2 problems. First, it does not cover height of screen by default unldess I set a min-height=... for it. Second, if I do it, after scrolling the page, the background images won't repeat to cover whole of screen height.
html {
margin:0 0 0 0;
height: 100%
}
body {
font-family:Arial;
font-size:9pt;
color:#333333;
line-height:200%;
margin:0 0 0 0;
background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
width:100% !important;
height: 100%
}
#main {
width:100%;
min-height: 100%
}
#sidebar {
width:231px !important;
float:left;
background-image:url('../images/sidebar_bg.PNG');
min-height: 100%;
}
#container {
float:left;
padding:25px 25px 25px 25px;
width:70%;
min-height: 100%
}
What's the problem?
Edit: This is my backgroun image
Try this - DEMO 1 : Unwanted white space
The additional space in the bottom is because of your padding:25px; ( Same as padding:25px 25px 25px 25px;).There's an extra top padding + bottom padding which is givin your div additional 50px.
If you do not want that additional space - Try this => DEMO 2 : without the white space
You can replicate the same effects of top and border 25px with this:
padding:0 25px;
margin:25px 0;
To avoid that extra unwanted space.
Edit:
The additional space is caused by the margin:25px 0;, if you remove it - you wont have that extra space.check this
DEMO 3 Removing unwanted space caused by Margin
Edit 2 :
Your problem is a well documented problem - Matching Columns Problem. There are loads of solutions you can try, here are a few :
1) javascript
2) Alter the Image (Hacky)
3) Pure CSS
My fav => Option 2
I havnt personally explored the last one,but try it out.. :)
Hope it helps..
The logo image at the top of this page http://54.251.57.136/ should center with:
.logo-img {
margin: 0px auto;
display: block;
}
... but it doesn't and I can't figure out why. Any help would be great.
Take off the float: left from logo-img and add text-align: center
Your div has a class .logo-img which is set to float:left. (and it would need a fixed width for the centering to work)
You are floating the image wrapper, if you adjust your css you can center it:
ADD THIS TO YOUR .logo-img
text-align: center;
REMOVE THIS FROM YOUR .logo-img
float:left;
What do you need to know:
Floated elements get off the normal document flow, so margin:0
auto; does not apply. You need to remove it.
margin:0 auto; on the .logo-img tag is not enough, you need to add
text-align:center; to allow the image to get centered.
Your logo-img class has a float: left
You must declare width on the div if you want it to center automatically with margin: auto. In this case width: 572px
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)