I have two div's .One is image Slider Div and other is footer Div.Now the main problem that is coming is that there is some unwanted space (gap) is coming between these two div's which i don't want.I want both these Div's to be One after another without any space but i am not able to do it.
Here is the HTML ..
<div style="padding-top:77px;">
First Slider Div
</div>
<div id="footer" class="footer-shadow">
Second Footer Div
</div>
And here is the css used..
.footer-shadow
{
position:relative;
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
height: 300px;
width: 100%;
color: gray;
}
Here is my fiddle link..
Fiddle Demo
Please help me to Correct this.Thanks ..
It is most probably a browser issue, as it's displaying fine for most of us.
A normaliser should help to make all browsers consistent, by overriding the browsers default margins, paddings, etc.
Have a look at normalize.css
IT looks like normal spacing between divs, but if you want to remove it, try using a negative margin.
Example:
margin-top: -8;
Related
I'm trying to add 2 tabs in a wrapper div and am having trouble getting them to lie next to each other, taking up half the width each. I added the following css to each one:
width: 50%;
height: 100%;
display: inline-block;
For some reason they keep appearing beneath one another instead of next to one another.
I made a JsFiddle to show whats happening: http://jsfiddle.net/5zLoyc7q/1/
Can anybody please help me get them so they're lying to next eachother like normal tabs?
Why not float? Make sure your box-sizing is border-box. Next:
<div class="wrapper">
<div>Hello world</div>
<div>Guten Tag</div>
</div>
CSS:
.wrapper {
overflow:auto;
}
.wrapper > div {
float:left;
width: 50%;
}
display:inline-block adds 1px of whitespace to the right of the element. Also, if you're not displaying as border-box, you could run into issues with your box model in other words your 50% isn't what you think it is.
updated fiddle: http://jsfiddle.net/5zLoyc7q/2/
make sure to clear the floats.
I'm setting a background image on a page, but for some reason, the image is ONLY showing if I had a height. I don't want to set a fixed height though.
Any thoughts?
<div class="thinkBPG content"></div>
CSS:
.thinkBPG.content {
background: url(./home-blueprint.png) no-repeat center center fixed;
}
Ignore this.
I needed to remove the center center fixed.
I told you it was something silly.
The issue is because the content within that div is floated, so you need to tell the browser you want that div to contain it's floated contents. There are a few ways to handle this...you can float that div, you can put overflow on it, or you can use a clearfix solution.
Simplest way without introducing a lot of new code is to simply take off the height, and then add
float: left;
width: 100%;
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.