I have a web page with one big container for the entire page. Inside that <div> I have another <div> with float:left. Then, floating to the right of that child <div> I have a second container that will contain other <div>s. The secondary container is collapsing. I have searched and tried other solutions, but they didn't solve anything. BTW this is an html5 page <!DOCTYPE html>. Any ideas?
CSS:
body {
border: 0px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
font-family: Hanuman;
}
#container {
margin: 0 auto;
background: red;
height: 100%;
width: 100%;
overflow: hidden;
}
#bibletree {
padding: 0;
margin: 0;
height: 100%;
width: 15%;
float: left;
background: blue;
overflow: auto;
white-space:nowrap;
}
#container2 {
margin: 0 auto;
height: 100%;
width: 85%;
background: gray;
float: right;
overflow: auto;
}
html:
<div id="container">
<div id="bibletree">
stuff here
</div>
<div id="container2">
there will be two other divs here as well. This one is collapsing.
</div>
</div>
Hi now give to body and html height 100%
As like this
body, html{
height:100%;
}
Demo
Does This solve the problem?
(adding overflow:hidden to #container2's rules?)
Related
I am trying to make element position with negative margin - one element should cover a bit the previous one. But it's bit complicated - negative margin should have only child div of #content. See example below. I need to have red element, than yellow element and gray element inside the red one should have negative margin and cover bottom of red one.
I have already tried relative and absolute position, change z-index, but none of these worked for me.
#sectionTitle {
height: 150px;
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
background: red;
}
#content {
background: yellow;
position: relative;
width: 100%;
height: auto;
min-height: 300px;
overflow: auto;
z-index: 20;
}
#content .block {
position: relative;
background: #eee;
width: 90%;
top: -50px;
margin: 0 auto 0 auto;
box-sizing: border-box;
height: auto;
min-height: 400px;
z-index: 30;
}
<div id="sectionTitle">
...some text...
</div>
<div id="content">
<div class="block">
...element which should cover bottom of #sectionTitle element
</div>
</div>
Now when I inspect the element, .block goes 50px to #sectionTitle, but it's not visible, because sectionTitle element covers it.
Simply remove z-index (to avoid the creation of a stacking context1) and overlow:auto (to avoid the creation of a block formatting context2) from the #content div:
#sectionTitle {
height: 150px;
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
background: red;
}
#content {
background: yellow;
width: 100%;
height: auto;
min-height: 300px;
}
#content .block {
position: relative;
background: #eee;
width: 90%;
top: -50px;
margin: 0 auto 0 auto;
box-sizing: border-box;
height: auto;
min-height: 400px;
z-index: 30;
}
<div id="sectionTitle">
...some text...
</div>
<div id="content">
<div class="block">
...element which should cover bottom of #sectionTitle element
</div>
</div>
1Why can't an element with a z-index value cover its child?
2What formatting context applies to elements that don't create their own?
Im building a website and the footer wont stick at the bottom. Could someone help me with this issue?
CSS
#footer {
background-color: #454245;
bottom: 0;
float: right;
height: 200px;
left: 0;
margin-top: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Try like this: LINK
HTML:
<div class="wrapper">
<p>Your content goes here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer content</p>
</div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer,.push{
background-color:#ccc;
height: 155px;
}
You will have to provide position as absolute and it will only work when you can provide a wrapper or a parent div with position relative.
Look at this fiddle [http://jsfiddle.net/tLyC6/]1
You can have a sticky footer by setting its position: fixed (not relative) with bottom: 0
#footer {
background-color: #454245;
bottom: 0;
height: 200px;
overflow: hidden;
position: fixed;
width: 100%;
}
If you want footer to stick at the bottom, you can do it with using less code.
#footer {
background-color: #454245;
height: 200px;
margin:0 auto;
width: 100%;
}
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
here is the sample html:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
its css:
*
{
padding: 0px;
margin: 0px;
}
body, html
{
height: 100%
}
div
{
border: none;
}
#mainWrapperDiv
{
min-height: 100%;
height: 100%;
margin-bottom: -200px;
}
#mainDiv
{
margin: 0px auto 0px auto;
width: 1000px;
min-height: 500px;
background: lightgreen;
}
#footerDiv
{
height: 200px;
width: 100%;
position: relative;
clear: both;
background: lightblue;
}
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
Because the position is set to relative. and also the margin-bottom: -200px;
It's because of your margin-bottom in the #mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/