For some reason when I add a width and height to .left-section, .section-page-layout-container doesn't expand and show the background, but if I add a height to .section-page-layout-container the background gradient repeats perfectly and every pixel is filled.
I tried messing around with the code but nothing seemed to work. Must be another stupid mistake.
Hopfully you good folks can help me out :)
Thanks in Advance!
My HTML
<section class="section-page-layout-container">
<div class="section-page-layout">
<div class="left-section">
<header>
</header>
</div>
<div class="right-module-section">
</div>
</div>
</section>
<div class="clear"></div>
My CSS
.section-page-layout-container {
background:#984B09;
background: url('../img/section-page-oj_gradient-background.png') repeat-y;
background-size:contain;
width: 100%;
}
.section-page-layout {
width: 1280px;
position: relative;
margin: 0 auto;
height: auto;
}
.left-section {
width: 585px;
height: 500px;
background: #000000;
float: left;
}
Use overflow: hidden
.section-page-layout-container {
background:#984B09;
background: url('../img/section-page-oj_gradient-background.png') repeat-y;
background-size:contain;
width: 100%;
overflow: hidden;
}
When you have floated object inside an object the container collaps, thats why u need a clearfix
Related
Would like to apply a background-color to a div that's nested inside a footer. The footer has a background-image covering the entire footer I set in CSS. The background-color of the div containing the imgshould reach the bottom of the footer's bakground-img. Here's an illustration of what I mean:
My code looks like this:
<footer>
<div class="some class">
<img src="img/some-image.png" alt=" ">
<div class="some class"> other content </div>
</div>
<div class="bottom-footer"> </div>
</footer>
CSS:
footer {
background-image: url('../img/footer.jpg');
background-repeat: no-repeat;
background-size: 100%;
height: 400px;
width: 100%;
}
.some.class {
width: 300px;
height: 365px;
margin-left: 2%;
background-color: (0,0,0,.97);
z-index: 1;
}
div.some img {
width: 260px;
height: 130px;
margin-top: 30px;
}
The img shows but i cannot see the background-color of the div that has the img. Probably a simple fix but I can't seem to figure it out. Any help would be appreciated.
You need to include rgba.
background-color: rgba(0,0,0,.97);
To keep it short here's the example of the problem.
http://jsfiddle.net/2KTFG/1101/
see the first paragraph dissappears behind the header
html
<div id='header'>
<div id="div_1">
<p>hello</p>
</div>
<div id= "div_2">
<p>hello</p>
</div>
</div>
<div id='body'><p>why this goes behing previous div?</p>
<p>why this goes behing previous div?</p>
<p>why this goes behing previous div?</p>
</div>
css:
#header {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background: green;
}
#div_1 {
margin: 0 auto;
}
#div_2 {
margin: 0 auto;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
thanks in advance
Because you set the margin of your body to 30 and the height of the header to 50px.
Because the #body (margin-top:30px) is not enough to clear the header. Increase the margin value to push the first paragraph down.
I hope this helps
Giving something position:fixed; will cause that element to be fixed to wherever you place it in the browser. Since your paragraph div doesn't have any position styles, the header will be placed on top of it.
If you give each element position: relative; they will stack on top of each other.
#header {
position: relative;
top: 0px;
height: 50px;
width: 100%;
background: green;}
#body{ height: 3000px; overflow: auto;position:relative; }
Example in fiddle.
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.
"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".
Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?
Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}
To this:
.wrapper {
height: 100%;
}
Basic structure of the page:
<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">
<div id="contentShadow">
<div id="#contentWrapper">
<div id="content">
<!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
Css rules relevant to these divs:
html, body {
height: 100%;
}
#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}
#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}
#content {
min-height: 100%;
}
.footer, .push, {
height: 37px;
}
.footer {
background: white;
clear: both;
height: 37px;
}
You have really wrong code:
.wrapper matched <div class="wrapper"> not <div id="wrapper">.
<div id="#contentWrapper"> is not correct, you should try <div id="contentWrapper">
height: auto; is the problem. The wrapper needs to be 100% height, not auto...
the height: 100% after height: auto !important doesn't make sens, because of the !important keyword.
Maybe it's the default margins and padding, have you tried this?
body {margin: 0px; padding: 0px; }
I had this issue for the better part of my life, but I just solved it for myself, so I'm sharing, just in case somebody else can benefit.
My HTML/BODY selector is set to height:100%.
My container div within the HTML/BODY selector is set to min-height:800px.
My CONTENT div inside of the CONTAINER div didn't have a height, and I had the issue of the div not stretching to the bottom of the page. When I inspected this div, I noticed that for some reason, it was stretching way below its container div, pushing it up and creating that annoying space at the bottom of the page. Once I placed a height on that inside DIV, the issue went away for me.
I hope this helps.
The contentShadow must have overflow: auto. Try this
body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }
<body>
<div id="container">
This should fill the page!
</div>
</body>
I have a container div and would like to place three div tags within the center div, I have the XHTML correct, but what I am having trouble in is, well, centering the three divs within the div.
I will now show the code.
XHTML 1.0 Transitional (HTML)
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="contentbox">
</div>
<div id="contentbox">
</div>
<div id="contentbox">
</div>
</div>
</div>
Cascading Style Sheet (CSS)
#container {
width: 900px;
height: inherit;
margin: 30px auto;
}
#content {
float: center;
width: inherit;
height: inherit;
margin-left: auto;
margin-right: auto;
position: absolute;
}
#header {
margin: 0 auto;
background-image: url(images/logo.png);
background-position: center;
width: 250px;
height: 250px;
}
#contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
background-image: url(images/contentbox.png);
}
To see an example of what I am trying to do, please visit http://www.noxinnovations.com/portfolio/hfc/
I want to know how to center those three content boxes within the content div.
Thank you very much,
Aaron Brewer
Check if this is what you want :
http://jsfiddle.net/65WHf/1/
Note that ID's are supposed to be unique, and there's no such thing as center floating. To center a div, you must ensure it's positioned relativelly to it's container (wich is the default behaviour of most browsers of my knowledge) and make use of the followinf syntax :
.something {
margin: 0 auto;
clear: both; // instead of float
}
Hey,
float: center; won't work. There's no such value for the float property.
use this instead for the #content css
text-align: center;
hope that helps.
You could always do something like this:
HTML:
<div id="container">
<div id="header"></div>
<div id="content">
<div class="contentbox"></div>
<div class="contentbox"></div>
<div class="contentbox"></div>
</div>
</div>
CSS:
.contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
border: 1px dashed #999; /* just for visuals */
margin: 0 10px; /* just for visuals */
}
You definitely want to stay away from IDs as a general practice, do you can use them with javascript (jquery, etc) libraries. Plus it's cleaner that way.