Css Wrapper and Container Div Auto Height? - html

I want div in div height set auto.
http://bit.ly/rubikss1
at the bottom of the div inside is coming out. I want the bottom div to extend to.
Please Help!
body,html{height:100%}
.wrapper{
width: 700px;
height: 100%;
margin: 25px auto;
overflow:hidden;
position: relative;
}
.inner-container{
width: 100%;
height: 100%;
float: left;
border-radius: 5px;
background: rgba(255,255,255,.5);
position: relative;
}
.button-container{
float: left;
width: 100%;
height: 35px;
position: absolute;
z-index: 2;
}
#prev, #next{
border: 0;
background: #5CB85C;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
}
#next{
float: right;
}
#prev{
float: left;
}
#verilistesi{
float: left;
width: 700px;
height: 100%;
position: relative;
overflow: hidden;
}
#verilistesi .item-container{
width: 100%;
float: left;
}
#verilistesi .item-container .item{
width: 500px;
height: 100%;
background: rgba(0,0,0,.3);
margin-bottom: 35px;
margin-top: 50px;
position: relative;
overflow: hidden;
}
My css.
How i do set auto height two div? Please give help?


I think that is what you want:
body,html{height:100%}
.wrapper{
width: 700px;
height: auto;
margin: 25px auto;
overflow:hidden;
position: relative;
}
.inner-container{
width: 100%;
height: auto;
float: left;
border-radius: 5px;
background: rgba(255,255,255,.5);
position: relative;
}
.button-container{
float: left;
width: 100%;
height: 35px;
position: absolute;
z-index: 2;
}
#prev, #next{
border: 0;
background: #5CB85C;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
}
#next{
float: right;
}
#prev{
float: left;
}
#verilistesi{
float: left;
width: 700px;
height: auto;
position: relative;
overflow: hidden;
}
#verilistesi .item-container{
width: 100%;
float: left;
}
#verilistesi .item-container .item{
width: 500px;
height: 100%;
background: rgba(0,0,0,.3);
margin-bottom: 35px;
margin-top: 50px;
position: relative;
overflow: hidden;
}

Related

Put A Header On Top Of A Box In CSS/HTML

I want to put my "why you should buy from us" on top of the large grey container but don't know how to as when I centre the text the containers all shift downwards preventing the text to overlap, does anyone know a fix to this?
#whybuy {
color: #ffcc00;
font-size: 40px;
margin: 0 auto;
margin-top: 200px;
text-align: center;
}
#largebox {
width: 1890px;
height: 475px;
background-color: #2c2c2c;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
margin-top: 200px;
}
#box1 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 425px;
}
#box2 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
#box3 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
<h1 id="whybuy">WHY BUY FROM US</h1>
<div id="largebox">
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</div>

This will put your text on the largebox.
#whybuy {
color: #ffcc00;
font-size: 40px;
position: absolute;
width: 100%
text-align: center;
z-index: 1;
#largebox {
width: 1890px;
height: 475px;
background-color: #2c2c2c;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
display: relative
}
#box1 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 425px;
}
#box2 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
#box3 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}

check the margin for #largebox; it has margin-top: 200px;
#largebox {
width: 1890px;
height: 475px;
background-color: #2c2c2c;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
//margin-top: 200px;
}

Why a gap between ul li [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
In the following code, I am not able to understand that why is there a small margin between the green li's Home , Products , Services , About Us, Contact
I have set the margin and padding to 0px in both .ul and .li properties. Then why is there a gap between the green li's?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>

If you have no new lines between the list elements then it works. So you could put all on one line (see snippet) or add font-size: 0; to the <ul>
ul {font-size:0;}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li><li>Products</li><li>Services</li><li>About Us</li><li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>

Try this -
.list li {
float: left;
list-style: none;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
}
Replace with above css with your existing .list li class

You can remove space created by inline-block element as with following trick.
Or you can use float instead of inline-block.
.list {
letter-spacing: -4px;
font-size: 0;
}
.list li {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
}
Or you can use float:
.list {
overflow: hidden;
}
.list li {
float: left;
}

Just add this into your code,
.list{
font-size:0;
}
.list li{
font-size:20px;
padding:0px 0px 0px 10px;
}

CSS3 - Sticky position not work

i'm try to create navigation menu under header section with sticky positioning but i can't get it work, here my css code :
body{
}
header{
position: relative;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: whitesmoke;
text-align: left;
float: left;
padding: 5px;
z-index:100;
}
#logo{
position: relative;
height: 85px;
width: 120px;
/*border: 1px solid black;*/
float: left;
background-image: url('logoArdi.svg');
background-position: center;
background-size: contain;
}
#judulWeb{
position: relative;
height: 85px;
width: 200px;
text-align: center;
float: left;
}
#kontak{
position: inherit;
float: right;
height: 100px;
top: 20px;
right: 10px;
}
.imghead{
margin: auto 5px auto auto;
}
.sticky{
position: sticky;
position: -webkit-sticky;
position: -o-sticky;
top: 0px;
float: left;
width: 100%;
height:30px;
background-color: #26282b;
text-align: center;
box-shadow: 0px 2px 10px #26282b;
}
ul li{
position:relative;
bottom:11px;
display: inline-block;
margin: auto 30px auto auto;
}
ul li{
color:whitesmoke;
/*background-color:black;
border-radius: 5px 5px 0px 0px;
padding: 5px;*/
}
ul li:hover{
color:#26282b;
background-color: whitesmoke ;
}
#kontak{
position: inherit;
float: right;
height: 100px;
}
#wrapper{
position: relative;
top: 132px;
width: 80%;
float: left;
margin-right: 10%;
margin-left: 10%;
text-align: center;
background-color: transparent;
}
.imgutama{
width: 200px;
}
i don't now the mistake, but i just intend to create page header and navigation, the navigation is below the page header and will stick on top even i scroll down.
note : navigation class is "sticky".

#sidebar {
position: -webkit-sticky; // required for Safari
position: sticky;
top: 0; // required as well.
}

Elements moving around for some unknown reason

Whenever I change the id of the first subheading from aulas_subheading_2 to aulas_subheading_1. Some strange things happen to my layout, the aulas_heading_1 heading seems to disappear!
It goes from this:
To this:
I inspected the elements with firebug and identified that they are behind the divider, the aulas_heading1_band, which is in position:relative
What's going on here?
The relevant markup:
HTML
<section id="aulas_container">
<div id="aulas_container_top">
<h1 id="aulas_heading_1"><span class="highlight1">Aulas de Inglês</span></h1>
<h2 id="aulas_subheading_2">Práticas Imersivas</h2>
<div id="aulas_heading_band_1"></div>
</div>
<div id="aulas_container_bottom">
<h1 id="aulas_heading_1">Aulas</h1>
<h2 id="aulas_subheading_2"><span class="highlight2">com Professores Nativos</span></h2>
<div id="aulas_subheading_band">a</div>
</div>
CSS
#aulas_container {
background-position: center top;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 910px;
}
#aulas_container_top {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 50%;
position: relative;
background-image: url("http://i.imgur.com/6Tv6r7F.png");
}
#aulas_container_bottom {
height: 50%;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-image: url("http://i.imgur.com/YfxsPWu.jpg");
}
/* */
/* TEXT */
/* */
#aulas_heading_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
font-size: 50px;
text-align: center;
color: white;
}
#aulas_subheading_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
text-align: center;
vertical-align: bottom;
color: white;
}
#aulas_heading_2 {
color: black;
}
#aulas_subheading_2 {
font-size: 60px;
text-align: center;
vertical-align: bottom;
color: black;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#aulas_heading_band_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 35%;
position: relative;
top: -40%;
background-color: black;
}
*#aulas_heading_band_1:before {
content: "";
position: relative;
top: -30%;
background-color: white;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 50%;
display: block;
position: relative;
}
#aulas_subheading_band {
background-color: white;
height: 10%;
position: relative;
bottom: 0%;
}
#aulas_subheading_2_band{
background-color: $binaryColor0;
height: 5%;
}

IE7 z-index doesnt work event after adding position?

IE7 z-index doesn't work even if I add position: absolute or relative
Is there any other solution ? I add other divs lower z-indexes but doesn't work
.gallery {
background-color: #F4F4F4;
display: block;
min-height: 300px;
padding: 20px 10px;
position: absolute;
right: -44px;
top: 70px;
width: 980px;
z-index: 3000;
display: none;
}
.sub_menu {
background-color: #F4F4F4;
float: left;
height: 21px;
padding: 40px 35px;
position: relative;
top: 10px;
width: 930px;
z-index: 1000;
}

With z-index and IE it is sometimes required to use !important
.gallery {
background-color: #F4F4F4;
display: block;
min-height: 300px;
padding: 20px 10px;
position: absolute;
right: -44px;
top: 70px;
width: 980px;
z-index: 3000 !important;
display: none;
}
.sub_menu {
background-color: #F4F4F4;
float: left;
height: 21px;
padding: 40px 35px;
position: relative;
top: 10px;
width: 930px;
z-index: 1000 !important;
}

!important
Should be used as a last result.
Try the following before hand
body{
z-index: -1
}
.gallery {
background-color: #F4F4F4;
display: block;
min-height: 300px;
padding: 20px 10px;
position: absolute;
right: -44px;
top: 70px;
width: 980px;
z-index: 2;
display: none;
}
.sub_menu {
background-color: #F4F4F4;
float: left;
height: 21px;
padding: 40px 35px;
position: relative;
top: 10px;
width: 930px;
z-index: 1;
}