I have 3 divs. First div is at the top with position relative, and the second div is at the bottom and its position is absolute. There is also a third div which i want it to be on the middle. I want the third div to be in the middle so that no matter i change the height of my browser, i want it to be alligned with 20px padding, depending on the first and second.
middle-box{
padding: 20px;
}
.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}
.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}
Variations on this same question have been asked dozens of times on SO. The fact that you want 20px margin is irrelevant. It's the overall structure that can be tricky.
I think this meets your requirements. The one compromise you may have to make is setting fixed heights on your header and footer.
http://jsfiddle.net/Fd6f9/1
.top-box {
height: 60px;
position: relative;
}
.middle-box {
position: absolute;
top: 70px;
bottom: 80px;
left: 20px;
right: 20px;
margin: 20px 0;
}
.bottom-box {
height: 56px;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
}
If you choose to have your bottom-box "stuck" to the bottom of the browser window, you'll have a variable space between your middle-box and the bottom-box, depending on how much content is in the middle-box and the size your viewer's browser window. If you want consistent spacing between the divs, you need to remove the absolute positioning.
Also, I'd strongly recommend changing your css from classes to ids (. to #). You forgot the class/id marker on middle-box, so that might also be causing a problem.
Keep in mind that padding will affect the inside of your div, while margin will affect the outside.
Does this code give you what you're looking for? (I added background-colors just for a visual so I could see what was happening to the divs.)
<style type="text/css">
#top-box {
width: 265px;
position: relative;
margin: 0px auto;
background-color: #DDD;
}
#middle-box{
margin: 20px 0;
padding: 20px;
background-color: #AAA;
}
#bottom-box{
width: 25%;
padding: 12px 0 12px;
bottom: 0px;
min-width: 300px;
background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>
It's hard to know what else to tell you without knowing what you're planning on doing with these divs. Hope this helps!
Related
I want to create an element in css and keep it at a constant right spacing from the main content.
for example:-
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
width: 924px;
height: 580px;
}
now I am creating an image that needs to be at a constant distance from the main content, and on its right hand side.
ie. say 100px from main content at all times, no matter the size of window:-
.NewElement {
width: 78px;
height: 70px;
position: fixed;
bottom: 550px;
right: .main.width() + 100px; <--- how do I represent this??
display: none;
text-indent: -9999px;
background: url('../xxx.png') no-repeat;
background-color: #000;
}
right: .main.width() + 100px; <--- how do I represent this correctly??
Place 'NewElement' within the 'main' DIV (assuming these are DIVs) and set the margin-left:100px, so it will always be relative to that main DIV.
<div class="main">
<div class="NewElement"></div>
</div>
Here's a fiddle.
You would have to use javascript or jquery to do this:
var width = $('.main').css('width');
$('.NewElement').css('width',width+100);
I have to display two divs (in and out) so that they are positioned one on the left, the other on the right.
Using this css code they fit perfectly great on full screen, but I would like to be able to put them into a parent div, that will be the container
#in{
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 50%;
overflow: auto;
font-size: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
#out{
position: fixed;
top: 0;
right: 0;
left: 50%;
bottom: 0;
overflow: auto;
padding: 10px;
padding-left: 20px;
color: #444;
font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 16px;
line-height: 1.5em
}
Can anyone help me modify this code for that matter ?
Thank you
When using position: fixed; it fixes the element to the screen. You cannot position it relative to a element with CSS, in fact if you think about what position: fixed does you would never want to position it relative to a element and thought of it sounds impossible to me. A fixed positioned element is is taken out of the flow so that it is relative to the viewport you cannot just put it back in the flow somewhere.
I'm not sure if this is exactly what you're looking for, but essentially kmmathis is right. http://jsfiddle.net/R8bUQ/
The markup:
<div>
<div>
</div>
</div>
and the CSS:
div {
height: 800px;
width: 300px;
background: #f0f;
margin-top: 80px;
margin-left: 180px;
position: relative;
}
div div {
height: 20px;
width: 100%;
background: #0f0;
position: absolute;
margin: 0;
top: 0;
left: 0;
}
and the JS:
$parent = $('div').eq(0);
$elem = $parent.find('div');
$(window).scroll(function(){
$elem.css('top', $(window).scrollTop());
}).trigger('scroll');
Basically, you set the child to be positioned relative to its parent, and as you scroll, the amount that the window has scrolled sets the top of the element. It's fixed positioning, but is positioned relative to its parent. It's not 100%, but it might give you a basic idea of how to accomplish what you want.
When using position:fixed; you are positioning the elements relative to the browser window.
To use your own parent container, you'll need to set #in and #out to use position:absolute; and then wrap them in a container, let's say #wrap, that has position:relative; set on it.
Edit: here's a fiddle: http://jsfiddle.net/ktAAa/
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
I have something pretty simple I want to do. I'm still working through all the gotchas of CSS, so bear with me. I want to essentially take a div, put it position: absolute; left: 10px; right: 10px; bottom: 10px, then take its children and center them horizontally within the browser. This is my attempt at doing so:
HTML:
<div class="notificashun-holder">
<div class="alert-message info notificashun">
<p>Hello, World!</p>
</div>
</div>
CSS:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
}
.notificashun {
display: inline-block;
margin: 0 auto;
}
The thing is, I'm using Bootstrap and the alert-message class makes items display: block, so I need to "shrink" them down to normal size (to fit only the size of their contents).
Can anyone help me do this? I simply need to make notificashun-holder be ten pixels from the left, right, and bottom of the browser, and notificashun be only as big as it needs to be and be centered within notificashun-holder.
Since you're using an inline-block element for the .notificashun, it can be affected by the text-align property, so to make it centered, just apply the text-align: center; property to your .notificashun-holder:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
/*New property:*/
text-align: center;
}