I know the solution is very simple, but I have come here for help to get the answer quickly I hope. So I have my page set up with Divs and I have a "content" div and with in that content div I have a contentarea div, so here is the problem I have run into: I want to position the "contentarea" div in the content div, the "contentarea" div will be centered in the content div with a little margin on the top and bottom. The problem is when I set the margin "top" for the contentarea div the the "contentarea div" is not actually moving but the content div itself is moving, and creating white space between the menu. Some how the contentarea div when moved, moves the content div. Any solutions? I want the content div to stay where it is when I position my content area div!!
For the main div use:
overflow: auto;
Or overflow visible :). U can also set padding on the main div :).
Best regards!
If you don't want to use overflow, you can do the trick with padding, look at this code :
Exemple :
.contentdiv {
padding-top: 10px;
}
Or
.container {
padding-top: 10px;
}
The full exemple : http://jsfiddle.net/Ca4K2/
Related
On my site, I want to have a 'div' at the bottom of the page. It has no fixed height, but should always start '200px' from the top of the page.
The problem I am having is that when the content of the 'div' is very long, it's background doesn't expand when you scroll down.
Here is my code: JSFiddle (updated)
I have tried working with height=auto and border=auto, but then the 'div' doesn't stretch to the page bottom when there is less content and you don't have to scroll down.
Update:
Sorry for miss expressing my problem: I need the 'div' to have position: relative because I need it to be positioned in the center of the page with left=10% and right=10%.
I also updated the JSFiddle.
Update 2:
I guess there is no perfect solution to this problem. What I will end up doing: Having two 'divs'. The first div will have the page content on it and will not show the background when there is less content; the other div will be behind the content-div and won't scroll at all, but it will show the background for the div in front when there is less content.
I've changed some 'design' from your original to be able to satisfy your requirement.
First, here's my jsfiddle
#top {
height:200px;
background:#FFF;
}
body {
background:red;
margin:0;
padding:0;
}
What I've done is I've set the whole page background to red. Made the #top height 200px with white background, so the #bottom would be 200px apart from the top. Now the trick I've done is, the #bottom is actually isn't touching the bottom if it has less content, but what you see is the illusion from the body's background and #bottom's no background.
Change it to position relative will work in your example fiddle.
add height: auto; to your div's css
EDIT:
and remove bottom: 0;
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.
my main container div can be refreshed, so its content is being hide/shown. When my container div is hide, my footer shoots up.
the html structure looks like the following:
Note that i already tried this:
And it doesn't seem to work, the footer div will still shoot up when the container div is hidden.
Nor can i set a height on the container div because i want the content div height to stretch 100%.
Any ideas? Thanks in advance.
Use this css:
#yourdiv {
position:fixed;
bottom:0;
}
This will make it stick to the bottom :)
Sticky footer is excellent for keeping the footer where it should be.