I've trying to make a test website, but there is a problem.
Here's is a picture, which show you, what's the problem:
The years (2010,2011,2012) are folders, and the '2013' folder contain some pictures. There's a php function, which I can read the folders and the picture names.
The DOM structure:
Főoldal
Elérhetőség
Önkéntes munka
Képtár
Főoldal
<div id="bottom">
bhvdksakd
</div>
The CSS:
#main{
max-width:22cm;
min-width:16cm;
background-color:#fff;
margin:0px auto 20px auto;
border-radius:10px;
padding: 10px 10px 10px 10px;
min-height:100%;
position:relative;
height:auto;
}
#left{
display:block;
width:20%;
min-height:100%;
position:absolute;
margin:0px;
top:0px;
left:0px;
border-right:1px solid rgba(192,192,192,0.5);
}
#right{
display:block;
min-height:100%;
height:auto;
width:80%;
text-align:justify;
position:absolute;
top:0px;
left:20%;
padding:20px;
}
#bottom{
max-width:22cm;
background-color:#fff;
margin:0px auto 0px auto;
border-radius:10px;
}
Is there any css method or anything, that the contain isn't outside of the "right" div?
Thanks!
ps: Sorry for my sentences, but I'm from Hungary :/
Add overflow: auto; to your CSS for the div with overflowing content.
This property will automatically add a scroll bar only on necessary axes to help contain content within the boundaries of the div. So if you have too much vertical content, you get a vertical (y) scrollbar. If you have too much horizontal content, you get a horizontal (x) scrollbar.
Related
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}
Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->
You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}
Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here
Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
I have a CSS two column layout which is fixed and centered. On pages where the navigation is long and the content is short, the footer is not repositioning to below the navigation - it remains at the min-height of the content area and the navigation falls behind the footer.
I have included everything in the fiddle for you to see: http://jsfiddle.net/fmJqw/1/
But essentially, i have the following structure:
<div id="wrapper">
<div id="headerWrapper"></div>
<div id="bcrumbwrapper"></div>
<div id="midWrapper">
<div id="navWrapper"></div>
<div id="contentWrapper"></div>
</div>
<div class="clear"></div>
<div id="footerWrapper"></div>
</div>
The CSS is as follows:
#wrapper{
padding:0px;
margin:0 auto;
width:1000px;
min-height:768px;
}
/*Header styles*/
#headerWrapper{
padding:0px 0px 0px 0px;
margin:0px;
width:1000px;
height:175px;
position:relative;
}
#bcrumbWrapper{
padding:0px 0px 0px 20px;
margin:0px;
width:980px;
min-height:24px;
position:relative;
}
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
min-height:513px;
position:absolute;
top:0;
bottom:0;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
float:left;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
#footerWrapper{
padding:5px 0px 0px 0px;
margin:0px;
width:1000px;
height:40px;
position:relative;
}
Because I was trying to float both items to the left, but using absolute positioning for one of the divs, things were competing. I removed the float on the content wrapper and removed absolute positioning on the navigation wrapper. I then changed the background colour of the containing div to ensure that it appeared as if the navwrapper ran the length of the page.
So it became:
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
background-colour: #EBE2CA;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
No changes to the HTML and no JavaScript needed!
You could always dynamically change min-height with a bit a javascipt, based on the height of the div that holds the content, which I think is #contentWrapper.
You could check CSS Sticky footer out: http://www.cssstickyfooter.com/ but it would take a bit of fiddling to get it to work due to the nature of your markup.
OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup
I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!
<style type="text/css">
<!--
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
#header {
width:650px;
height:87px;
z-index:1;
background-color:#C90;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#navbar {
width:650px;
height:32px;
z-index:2;
background-color:#0FF;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:265px;
z-index:3;
background-color:#33F;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#sidebar {
width:150px;
height:265px;
z-index:4;
background-color:#999;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#footer {
width:650px;
height:58px;
z-index:5;
background-color:#F69;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>
You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.
So if your container is 400px high you would use the following css:
#container {
position: absolute;
top: 50%;
margin-top: -200px;
}
In your case your 'container' is 442px high, so change this css:
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
To this:
DIV.container {
position:absolute;
top:50%;
margin-top:-221px;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
Your stylesheet can be much cleaner/smaller.
See this demo fiddle.
And if you don't want a scroll bar when the browser window becomes small, then add overflow: hidden to the body, see this fiddle. But that's NOT a tip in the light of usability.
And to make it dynamic, use Javascript/jQuery to find the height of the window, and adjust DIV.container's margin-top as shown by Kokos.
My basic layout for my page is:
<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>
headWrap has all my menu items and search bar. contentWrap holds the content of each page. Both have a width of 100%. headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.
Somehow, when the page is rendered, the horizontal scroll bar is visible. Even though it appears that all content is on the page. If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white. If I stretch the window wide enough the background image takes up the entire page.
How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.
#headWrap{
position:relative;
width:auto;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:auto;
height:1005;
margin:0 0 0 0;
padding:0 0 0;
float:left;
background:url(images/contentBg.jpg) repeat-x;
}
Use following CSS styles: width and overflow:hidden;
html{
margin: 3px 1px;
}
*+html{
overflow:auto;
}
body{
margin:0;
width:100%;
min-width:800px;
position:relative;
}
#headWrap{
position:relative;
width:100%;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:100%;
margin:0;
padding:0;
float: left;
background:url(images/contentBg.jpg) repeat-x;
}
Maybe you have some default margins that are added in addition to the 100% width? I suggest using a reset css, for instance YUI 2: Reset CSS.
You're looking to set the overflow CSS property.