I'm trying to create a HTML CSS Layout using div tag.
Code here
Now it display a vertical bar. I want to avoid this vertical bar, and would like to display only if the content is big.
May you wnt an Sticky Footer than put your footer outside the #container.
Check this http://jsbin.com/ujemaq/17
EDIT:
Ok your actual problem arises with the height ambiguity, see these line:
#container{
min-height: 100%;
width:100%;
height:100%; /* this causes container to a 100% height of body*/
}
#header{
width:100%;
height:55px; /* this takes 55px of container height*/
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px; /* this takes another 20px of container height*/
/*border:2px solid;*/
}
#left-nav{
width:20%;
height:100%;
float:left;
/*border:2px solid;*/
}
#content{
height:100%; /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
/*border:2px solid;*/
}
apply this css
body,html{
height:100%;
}
#container{
min-height: 100%;
width:100%;
height:100%;
}
#header{
width:100%;
height:55px;
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px;
/*border:2px solid;*/
}
#left-nav{
width:20%;
float:left;
/*border:2px solid;*/
}
#content{
height:85%;
/*border:2px solid;*/
}
#footer{
background-color:#FFA500;text-align:center;
}
</style>
Related
I have a problem, i would like to place a div after a div with a div child of absolute position.
What i will like to do is main div to fit with main-inner-one height and normal div to take place after main div
Here is my code: jsfiddle
#main {
width:100%;
background-color:#f00;
padding:20px 0px 20px 0px;
position:relative;
}
#main-inner-one {
width:100%;
height:200px;
background-color:#f9c;
position:absolute;
}
#normal {
width:100%;
height:50px;
background-color:#000;
}
<div id="main">
<div id="main-inner-one"></div>
</div>
<div id="normal"></div>
To make the #main-inner-one stretch across the #main you need to remove absolute positioning.
Preview - This is how it should've worked.
Answer: Change this
#main-inner-one {
position: relative;
padding:20px 0px 20px 0px;
}
#main {
padding:20px 0px 20px 0px; /* remove this */
}
if i understand correct you want to adjust the width and height based on the child's width and height. for me this worked by setting the parent div display to table-cell and width, height to auto. the child set display to block and the width, height to vw / vh or anything else except % values.
#main {
display:table-cell;
position:relative;
width:auto;
height:auto;
background-color:#f00;
padding:20px 0px 20px 0px;
}
#main-inner-one {
display:block;
position:relative;
width:100vw;
height:80vh;
background-color:#f9c;
}
#normal {
display:block;
position:relative;
width:100%;
height:50px;
background-color:#000;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
height 100% is working in some divs and in others doesnt(container).
Height 100% works in Menu_left div but in container doesnt.
I don't know why it didn't work to set height 100% in that div.
here is my html code:
<body>
<div class="All clearfix">
<div class="Menu_left">Menu</div>
<div class="Container_right">Container</div>
</div>
</body>
My css:
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,q,s,strong,sub,sup,tt,var,b,u,i,center,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,section{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
.clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
html{
padding:0;
margin:0;
height:100%;
min-height:100%;
}
body{
padding:0;
margin:0;
height:100%;
min-height:100%;
-webkit-background-size:cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.All{
width:100%;
height:auto;
min-height:100%;
position:relative;
overflow:hidden;
background-color:rgb(35,31,32) ;
}
.Menu_left_float{
float:left;
background:blue;
width:340px;
height:100%;
}
.Menu_left{
position:fixed;
top:0px;
left:0px;
width:340px;
height:100%;
background-color:#F0F;
}
.Container_right{
position:relative;
background-color:#00F;
min-height:100%;!important
height:100%;
margin:0 0 0 340px;
}
http://jsbin.com/jezoqume/1/edit
give .All height of 1px and it will work.
cheers.
On adding position:fixed instead of position:relative, it is working.
http://jsfiddle.net/SVhm6/
.Container_right{
/*position:relative;*/
position:fixed;
background-color:#00F;
min-height:100%;!important
height:100%;
margin:0 0 0 340px;
}
Your position:fixed is causing this. When you applied a fixed position, you took ownership of that entire side.
get rid of the fixed position and you'll see. And for more fun, give the other div a fixed position and you'll see that doing it instead!
It's all in the position bud.
So either make them both fixed, or use height auto with relative position. You will be fine either way.
I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.