<body>
<div id="containers" >
<div id="header">
<table> <tr>
<td><div id="logo"></div></td><td><div id="band-logo">
</div></td><td><div id="facebook"></div></td><td>
</td></tr>
<div id="amenu">
<ul id="mainMenu"><li id="first"></li><li></li><li id="last"></li></ul></div>
<div id="clearheader"></div>
</div>
<div id="container">
<div id="subMainBox"></div>
<div id="mainBox">
<div id="contents">
</div></div>
</div>
<div id="footer_show"> <div id="fd">
<div id=copy_right><br /><strong></strong></div>
</div>
</div>
</div>
</body>
(CSS CODE UPDATED)
#containers{
width:1000px;
margin: 0 auto;
position:relative;
margin-top:-20px;
}
#container{
position:relative;
top:-247px;}
#header{
width:1000px;
margin: 0 auto;
}
#contents{
position:relative;
top:-60px;
left:30px;
}
#mainBox{
height:500px;
float:right;
width:650px;
margin:0 150px 0 150px;
}
#mainBox2{
float:right;
width:650px;
margin:0 120px 0 150px;
}
The code as above, can anyone help to make this code to sticky footer? I have tried many methods. Thanks.(CSS CODE UPDATED)
Related
This is simplified markup:
<div id="container">
<div id="top" style="position:fixed">
<div class="header-top" style="z-index:100"></div>
<div id="access" style="z-index:100"></div>
<div id="image" style="z-index:50"></div>
</div><!--end top-->
<div id="main" style="z-index:75"></div>
</div>
as #main scrolls up over the fixed #top element, I would like it to display layered above #image, but below #access and .header-top.
Since the fixed position of #top creates a context, it seems I have a problem.
any thoughts?
You need to insert your <div id="main"> inside <div id="top"> after all.
You can create specific class for a fixed elements.
#access, #main, #image {
width:200px;
height: 200px;
}
.fixed {
position:fixed;
}
#access {
background-color:red;
margin: 100px 0 0 100px;
}
#main {
background-color:blue;
margin: 50px 0 0 50px;
position:absolute;
}
#image {
background-color:green;
}
<div id="container">
<div id="top">
<div class="header-top fixed" style="z-index:100"></div>
<div id="access" class="fixed" style="z-index:100"></div>
<div id="image" class="fixed" style="z-index:50"></div>
<div id="main" style="z-index:75"></div>
</div><!--end top-->
</div>
With Bootstrap 3, I'm trying to make an image stay within the boundaries of it's parent div.
This works fine for width, but no matter what I try, the image keeps falling out of the bottom of the parent div, because it's height doesn't update when I decrease browser height. Is it possible to make this work ? If so, how ? Thanks.
JSFiddle : http://jsfiddle.net/rensdenobel/9486t/
HTML :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center">
<div class="content">
<div id="text">You chose this photo :</div>
<div id="thumbnail-container">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
<div id="button-share">
<button class="btn btn-success">Share it !</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div>
</div>
CSS :
html, body {
height:100%;
}
.container {
height:100%;
width:100%;
border:1px solid blue;
}
.row {
border:1px solid green;
height:100%;
}
.center {
display:table;
border:1px solid red;
padding-top:12px;
padding-bottom:12px;
text-align:center;
height:100%;
max-height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
height:auto;
border:1px solid green;
}
#thumbnail-image {
margin-left:auto;
margin-right:auto;
height:auto;
}
#thumbnail-container{
width:100%;
border:1px solid pink;
max-height:70%;
height:70%;
margin-top:12px;
margin-bottom:12px;
}
try
<div id="thumbnail-container col-sm-4 col-xs-4">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
change the col-sm-* and col-xs-* to get your desired output
This approach works for me. Please try adding this to your css:
.container {
height:max-content;
}
Hello guys I'm trying to centre some images. They keep on floating to the left,I've tried text-aligning but it doesn't seem to work. THe jsfiddle is here. http://jsfiddle.net/E7Ydz/2/ P.S. I could probably do this when I've had some sleep, it's 5:56 in London :(
[HTML]
<div id="portfolio" style="height: 3020px;">
<div id="project" class="cms design html-css " data-col="1" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry1" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail275.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="design illustration html-css " data-col="2" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry2" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail2.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="app database design " data-col="0" data-row="1" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry3" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/pgtips_thumb37.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
[css]
#project{
float:left;
position:relative;
padding: 0px 0px 0px 2px;
height:200px;
width:309px;
display: inline;
}
.workEntry{
width:310px;
overflow:hidden;
}
#thumbAttachment{
float:left;
width: 310px;
height:200px;
overflow: hidden;
}
#inThumb{
float:left;
}
#blackCross{
float:left;
width: 310px;
height:200px;
margin-top:-200px;
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:visited{
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:hover{
khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
opacity:100;
}
Hope I understand your question well. You should use margin-left: auto; and margin-right: auto; to make a div (or in a better word, a block position element) center.
For instance you should change your css code to something like:
#inThumb{
margin-left: auto;
margin-right: auto;
}
See this jsFiddle: http://jsfiddle.net/E7Ydz/4/
I have the following HTML (and also at http://jsfiddle.net/pHXSJ/). In IE and Firefox, it works as expected. However, Chrome and Safari do not correctly position the footer at the bottom of the viewport.
I have tried many things suggested here already, including implementing from cssstickyfooter.net. While those techniques work, they start to fail once I try to provide the (in the example) green side bar color. Note there is no content slated for those sidebars.
<!DOCTYPE html>
<html>
<head>
<title>2012 test</title>
<style>
html,body,form {height: 100%;}
body,p{margin:0}
div#wrapper {height:100%;background-color: transparent;}
div#contentwrap {width:100%; position:relative; height:100%; top:0; padding-bottom: -4em;}
div#content {top:0;position:relative;width:20em;min-height:100%;margin-left:auto;margin-right:auto;background-color:white; border-left: 2px yellow solid;border-right:2px yellow solid;}
div#header {min-width:20em; width:100%; position:absolute; top: 0; height: 2em; background-color: silver;}
div#header2 {min-width:20em; width:100%; position:absolute; top:2em; height: 1em; background-color: aqua;}
div#footer {min-width: 20em; position: relative; clear: both; margin-top:-4em; height: 4em; background-color: red;}
</style>
</head>
<body style="background-color:green;">
<form>
<div id="wrapper">
<div id="contentwrap">
<div id="content">
<div style="padding-top: 3.5em;">
<div id="lcol" style="float:left;position:relative; width:38%">
<p>Left</p>
</div>
<div id="rcol" style="float:right; position:relative; width:60%;">
<p>Right 1 total of 35</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 5</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 10</p>
</div>
<div style="clear:both;position:relative;">
</div>
</div>
</div>
</div>
<div id="header">
<div>Main Header</div>
</div>
<div id="header2">
<div>Header level 2</div>
</div>
</div>
<div id="footer" style="">
<div>Footer text</div>
</div>
</form>
</body>
</html>
If i look at your css this part is missing:
div#wrapper { min-height: 100%; padding-bottom: -4em; }
This should fix your problem in Chrome.
I have a strange problem.One of my div's width is not working. My CSS is like
.product_info
{
margin-top:10px;
background:#444;
width:850px;
}
.product_image
{
width:350px;
text-align:center;
float:left;
padding:8px;
border:1px solid #e9e9e9;
background:#fff;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
}
And My HTML file is
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
</div>
But as you can see in the attached image my div product_info's width is not 850px, Whats wrong
display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.
Width and height basically lose the original meaning in this context and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
.box {
margin: 2px;
border: 1px solid black;
padding: 3px;
}
.box.gray {
background: lightgray;
}
.box.container {
display: flex;
flex-flow: row;
}
<div class="box" style="
width: 300px;
font-size: 80%;
">
<div>
width: 300px;
</div>
<div class="box container">
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
<div class="box container">
<div class="box gray" style="
width: 200px;
flex: 0 0 auto;
">
width: 200px;<br>
flex: 0 0 auto;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
</div>
Try
display:block
It should work
display: inline-block; Worked for me
Example:
label {
min-width: 90px;
display: inline-block;
}
i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
Actually you have used floating in your child div's and didnt clear your parent div.
So i have cleared your parent div through overflow:hidden; in parent div and cleared this child div .product_details also its working fine......
CSS
.product_info
{
margin-top:10px;
background:#444;
width:850px;
overflow:hidden;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
clear:both;
}
Use the clear: both; property.
.product_info {clear: both;}
Hi now define your class .product_into overflow:hidden;
Live demo
as like this
.product_info{
overflow:hidden;
}
=======
or option 2
define one css
Css
.clr{
clear:both;
}
Put the this div in last line closing the .product_info class
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
<div class="clr"></div>
</div>
Live demo option two