I set my div to be fixed position and when I scroll page to very bottom or if I use smaller screen like smartphone or tablet my fixed div float over my footer. How can I fix this?
This is my fixed div:
.infoItem{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px #e4e4e4 solid;
width: 227px;
background:#f8f6f7;
position: fixed;
}
and this is my wrapper:
.wrapper {
min-width:954px;
}
I also try to wrap my infoteam div in another div and set new div to be position: absolute but that also didn't work.
Fixed div html
<div class="box-collateral box-up-sell">
<div class="infoItem">
<p class="heading">Add to your </p>
<p class="content">
<div class='upsellContainer'>
<div>
</div>
</div>
</p>
</div>
</div>
footer css
.footer { background:url(../images/footer-top-border.png) repeat-x;}
/* .footer-container { border-top:15px solid #b6d1e2; }*/
.footer { width:904px; margin:0 auto; padding:30px 10px 50px; }
.footer .store-switcher { display:inline; margin:0 5px 0 0; color:#fff; }
.footer .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer .store-switcher select { padding:0; vertical-align:middle; }
.footer a {text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer .bugs { margin:13px 0 0; }
.footer .bugs a { text-decoration:underline; }
.footer .bugs a:hover { text-decoration:none; }
.footer address { margin:0 0 20px; }
.footer address a {text-decoration:underline; }
.footer address a:hover { text-decoration:none; }
.footer ul { display:inline; }
.footer ul.links { display:block; }
.footer li { background:url(../images/bkg_pipe2.gif) 100% 60% no-repeat; padding:0 7px 0 4px; }
.footer li.last { background:none !important; padding-right:0 !important; }
.footer-container .bottom-container { margin:0 0 5px; }
Use clear:both inside the footer div or apply clear:both in css like:
#footer{
clear: both;
}
Add another div right after your div and before your footer like this:
<div style="clear:both"></div>
This will force any element below it down. You also want to make sure that the footer has clear:both as well (this should always be true of footers)
Related
html
<div id="container">
<div>
<span>Visit website</span>
<span>View project</span>
</div>
</div>
css
#container {
width: 100%;
padding:0;
background-color: green;
}
div { padding: 0 20px; width: 0px; background:red;overflow:visible; text-align: center;}
span {
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
Demo: http://jsfiddle.net/cePe3/445/
How to make the 2 span to be inline with each other in the middle of the container DIV!
Note: code structure must be as its.
thank you
You can use a more modern solution: flexbox
Add display: flex; justify-content: center; to #container and to #container div. It's magic.
Working fiddle: http://jsfiddle.net/cePe3/448/
You have to set your div width to auto
div { padding: 0 20px; width: auto; background:red;overflow:visible; text-align: center;}
https://jsfiddle.net/cePe3/446/
you have to set div width for inline span
div
{ padding: 0 20px;
width: 350px;
background:red;
overflow:visible;
text-align: center;
}
DEMO
make the position absolute for the spans, then add jquery to center the spans, even on resizing of the window:
$( window ).resize(function() {
shuffle();
});
function shuffle() {
$('span').each(function(){
$(this).css('left',($('#container').width()-$(this).width()) / 2);
});
$('#container').find('div').css('height',$('span:first').height()*6);
}
shuffle();
#container {
width: 100%;
padding:0;
background-color: green;
}
div { padding: 0 20px; width: 0px; background:red;overflow:visible; text-align: center;}
span {
position: absolute;
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
span:nth-child(2) {
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<span>Visit website</span>
<span>View project</span>
</div>
</div>
I have the following HTML:
<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
<div id="divEachImage">
<div id="slides">
<div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
</div>
<div id="menu">
<ul class="ulText">
<li class="menuItem act">PS: BASICS</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
.setCenter {
text-align: center;
}
#divEachImageExt {
float: left;
width: 30%;
margin: 0 auto;
}
#divEachImage {
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;
/* The width of the divEachImage */
width:175px;
overflow:hidden;
margin: 0 auto;
}
#slides {
/* This is the slide area */
height:155px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:175px;
overflow:hidden;
margin: 0 auto;
}
.inta {
float:left;
width: 175px;
margin: 0 auto;
height: 140px;
padding-top: 8px;
}
#menu {
/* This is the container for the thumbnails */
height:45px;
}
ul.ulText {
margin:0px;
padding:0px;
}
ul.ulText li {
/* Every thumbnail is a li element */
width:125px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
line-height: 45px;
vertical-align: middle;
}
li.inact:hover {
/* The inactive state, highlighted on mouse over */
background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
cursor:default;
}
ul.ulText li a {
display:block;
background:url('../theImages/divider.png') no-repeat right;
height:35px;
padding-top:10px;
}
What happens is, the inner DIV is left aligned instead of being centered.
Here is a F12 Dev Tool screenshot:
Add display: inline-block to an element you want to be centered.
Heres the fiddle for you: http://jsfiddle.net/u26wqssb/
And heres the code:
Sample HTML:
<div class="setCenter">
<div class="centerMe"></div>
</div>
and CSS:
.setCenter {
width:100%;
text-align:center;
background: #eee;
}
.centerMe {
width:100px;
height:100px;
background:red;
display:inline-block;
}
If you add a fiddle for your case we can fix it there.
Hey You can Try using the margin to center it like so
.yourstyle {
margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */
}
or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck
Is there any reason for the float in #divEachImageExt? If no the either
/* .setCenter part not needed */
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
or
.setCenter {
text-align: center;
}
#divEachImageExt {
display: inline-block;
width: 30%;
}
will do.
change #divEachImageExt to below code
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
remove float:left
It will solve your problem.
Hello fellow community members,
I am currently having a problem where I have set my top navigation bar to be fixed so that it follows users as they scroll down my web page but I am currently faced with two issues.
The content of my site is overlapping my navigation bar and goes ontop of it making it look messy and not function as designed. (The background is not transparent but rather a solid image)
The website is fluid and I have been fiddling with this for hours now trying to get it to work but as I set a min-width and max-width it doesn't seem to obey the min-width and width as a percentage (100% of the container). Sorry if I am a little unclear in explaining this but I have attached some code in jsfiddle for people to see.
If you would like to see where I am stuck at right now you can do so at subnovaled.com (the blue bar along the top) also the jsfiddle link is as follows:
#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
background: cyan;
}
http://jsfiddle.net/jXJMx/23/
Note: the above code was done in a rush, sorry
Thank you to anyone who is able to help me out!!
check this fiddle:
http://jsfiddle.net/jXJMx/26/
CSS:
#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 750px;
max-width: 1280px;
width: 100%;
background: cyan;
}
#navMainSearch {
float:left;
width:120px;
}
#navMain {
float:left;
width:750px;
line-height:normal;
height:32px;
}
#navMain ul {
float:right;
list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding: 7px 15px 0 15px;
text-align:center;
width:90px;
cursor:pointer;
height:25px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
float:none;
}
/* End IE5-Mac hack */
#navMain a:hover {
background-position:0% -32px;
}
#navMain a:hover span {
background-position:100% -32px;
}
#content {
background:yellow;
min-width:750px;
width:100%;
height:768px;
position:relative;
margin-top:32px;
}
Update CSS as show
#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
background: cyan;
}
#navMainSearch {
float:left;
width:120px;
}
#navMain {
float:left;
line-height:normal;
height:32px;
}
#navMain ul {
list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding: 7px 15px 0 15px;
text-align:center;
/*width:90px;*/
cursor:pointer;
height:25px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
float:none;
}
/* End IE5-Mac hack */
#navMain a:hover {
/* background-position:0% -32px;*/
}
#navMain a:hover span {
/* background-position:100% -32px;*/
}
#content {
background:yellow;
width:100%;
float:left;
height:1500px;
}
In the following code the div content-container is not expanding in its height as increase in the height of the divs inside it. I want to make its height auto increment with the increase in height of inner divs
This id my css code
body{
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #f0f0f0;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#content-container{
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 310px; /*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn{
float: left;
width: 310px; /*Width of right column*/
margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2{
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
body{
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #f0f0f0;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#content-container{
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 310px; /*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn{
float: left;
width: 310px; /*Width of right column*/
margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2{
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
HTML code
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div>
</div>
<div id="content-container">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
content here
</div>
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
content here
</div>
</div>
</div>
<div id="footer">UIasdfg</div>
</div>
Demo
Your code seems to work fine, only minor tips to work it smoothly :
give body height:100%;
In the class innertube, use a paragrap to show the content, this way, u'll achieve a better flexibilty in showing big text paras.
use word-break: break-all for para
like this
<div class="innertube">
<p style="word-break: break-all;">
content here content here content here content here content here content here content here content here content here
</p>
</div>
and clear:both to clear all floats in the end :
</div> <!-- #content-container -->
<div style="clear:both"></div>
Ok, I think I figured it out. Using the same JsFiddle I created... I added a small tweak to only one of your CSS elements, which is below. We went from:
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
and then all i added was a simple display which ended up being:
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
display:inline;
}
This enables whatever is inside of that div to maintain being inside of that div. Here is the demo that provides a better example of what I am saying.
A few things to note, I did add in a background color so that you could effectively see what was changing, as well as I added a height, which doesn't need to be there.. again, I added that to show you what was happening with the innermost div.
One really awesome tool that can help you understand why this works is the Almanac, which will show you many tools to help you with any CSS needs. I do want to point out that #Mr.Alien's stack question is another resource that is well beyond the Almanac's explanation. Let me know if you need anything else :)
This is my css -
#nav {
position: relative;
background-color: #292929;
float: left;
width:960px;
margin-left:auto;
margin-right:auto;
}
#nav li {
float: left;
list-style: none;
width:auto;
}
#nav li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
}
ul, li {
margin:0;
padding: 0;
}
#blob {
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background-repeat:repeat;
}
I want to place this object in the center. How do i do that. I also want the background to fit the page. I tried a lot, but it isn't working.
<ul id="nav">
<li>Home</li>
</ul>
Place an object in the center:
CSS:
.Center1
{
position:relative;
text-align:center;
}
.Center2
{
position:relative;
margin-left:auto;
margin-right:auto;
width:1024px;
height:800px;
text-align:left;
}
Markup:
<body class="body">
<div class="Center1">
<div class="Center2">
<!-- Your content -->
You want place <li> int the center, right?
The easiest way according to your current markup is to apply fixed width and add margin: 0 auto; to your li.
Semantics of that solution is really bad, but i guess you don't really care.