hi i would like to make full height for a left and side bars i must be 100% height but it made a little buggy my css looks like
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
height:100%;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
height:100%;
}
.content{
background-color: #99ff99;
float:left;
width:70%;
height:100%
}
this is my fiddle
demo
if i did height:100% for childs means most of the contents are get overflowed.
display .container as table:
.container{
background-color: #999;
padding: 20px;
display:table;
height:100%;
}
.sidebar{
background-color: #9999ff;
display:table-cell;
width:30%;
}
.content{
background-color: #99ff99;
display:table-cell;
width:70%;
}
http://jsfiddle.net/56C9v/15/
i've updated your fiddle
HTML:
<div class="container">
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
</div>
CSS:
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
}
.wrapper {
position: relative;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
}
.content{
width: 70%;
background-color: #99ff99;
float:right;
}
Related
I am learning css as beginner and doing some basic tests. My question is: given the css below how can I position the box2 in exactly the middle of the box1?
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}
At the beginning I thought giving box2 a margin auto so the box2 would be in equal distance from top and bottom but I get this result.
It looks like it sets the margin auto for left and right but not for top and bottom.
So if I give a margin top myself it works like this.
Code:
.box2 {
margin: 20px auto;
}
How can I do so the box2 is completely centered in the box1?
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
position:relative;
left:12.5%;
top:12.5%;
}
<div class="box1">
<div class="box2">
</div>
</div>
try this.
.box1 {
background: black;
height: 400px;
width: 400px;
display:flex;
justify-content:center;
align-items: center;
}
.box2 {
height:300px;
width:300px;
background: red;
}
<div class="box1">
<div class="box2"></div>
</div>
You can do this using flexbox
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
display:flex;
align-items: center;
justify-content: center;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}
<div class="box1">
<div class="box2">
</div>
</div>
.box1 {
position:relative;
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
position:absolute;
height:300px;
width:300px;
background: red;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Check the fiddle: https://jsfiddle.net/wh4yqk2y/
I'm trying to make my footer stick to the bottom of the page but somehow it just can't do. I've looked in the internet for answers with no luck, so I decided to give it a shot in here.
http://jsfiddle.net/f54eq3w8/
html:
<div id="container">test</div>
<footer></footer>
css:
html{
height:100%;
position:relative;
min-height:100%;
}
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:relative;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
JSFiddle - DEMO
Use an extra div inside container to push the footer with the same height as footer's height and apply bottom margin the negative value of the footer's height to container.
HTML:
<div id="container">
<div class="footer-push">
</div>
</div>
<footer></footer>
CSS:
html, body {
background-color: #00FF00;
height: 100%;
margin: 0px;
}
#container {
z-index: 999;
background-color: #00FF00;
position: relative;
width: 1024px;
margin: 0 auto;
min-height: 100%;
margin: 0px auto -104px auto;
}
.footer-push {
position: relative;
height: 104px;
}
footer {
z-index: 99999;
position: relative;
height: 100px;
background-color: #003300;
width: 100%;
border-top:4px solid #B8B8B8;
}
change your CSS like this. Please note that besides the footer, I got rid of the html styling, which is the culprit of your issues
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:absolute;
bottom:0;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
See your updated fiddle
I having problems with getting the scroll bars to appear inside the left and right container.
The scroll bars appears on the body at the moment.
Please see the fiddle: http://jsfiddle.net/pQq45/7/
HTML:
<div class="wrapper">
<div class="cont">
<div class="left">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
<div class="right">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.wrapper {
display: table;
background-color: yellow;
width: 100%;
height: 100%;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont{
width: 100%;
height: 100%;
background: #333333;
display: table-row;
}
.left{
display: table-cell;
width: 200px;
height: 100%;
overflow-y: scroll;
background: #FF0000;
}
.right{
display: table-cell;
width: auto;
height:100%;
overflow: hidden;
background: #00FF00;
}
.rect{
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
How can I get the scrolls to appear inside left and right containers, rather than on the body? So it would look like this:
This is a more complex layout. And you will run intro trouble using table-layout. I'd recommend you to ditch the table layout thing and use the following:
Demo: http://jsfiddle.net/pQq45/19/
html, body {
height: 100%;
margin:0;
padding:0;
}
.wrapper {
background-color: yellow;
height: inherit;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont {
background: #333333;
position: relative;
height: inherit;
}
.left {
position: absolute;
left:0;
top:0;
bottom:0;
width: 200px;
overflow: auto;
background: #FF0000;
}
.right {
position: absolute;
left: 200px;
top:0;
right:0;
bottom:0;
overflow: auto;
background: #00FF00;
}
.rect {
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
UPDATE 2
Try this
I think it's because you have height: 100%.
Try setting a pixel height and changing display: table-cell to display: block so that they'll adhere to the height.
It should look like this:
.left{
width: 20%;
background: #FF0000;
}
.right{
width: 80%;
background: #00FF00;
}
.cont {
height: 100%;
}
.right, .left {
float: left;
display: block;
height:100%;
overflow-y: scroll;
}
You are missing
overflow-y: scroll;
On .right
I wanted a design like this ;
I wrote my css like this :
text here
.my-title:before,
.my-title:after {
background-color: #CCCCCC;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 32%;
margin-left: -2%;
}
}
This seems correct in local, but becasue of the final } brace it was giving error in production.
How to do it with simpler CSS, so that i can get the desired design !
DEMO
HTML
<div class="maintext">
<div class="subtext">
<h2>Text Here</h2>
</div>
</div>
CSS
.maintext{
width:100%;
height:1px;
border-top:2px solid #6b6a6a;
position:relative;
margin-bottom:30px;
}
.subtext{
width:auto;
height:auto;
text-align:center;
position:absolute;
top:-15px;
right:0;
left:0;
}
.subtext h2{
padding:7px 12px;
background:#ffffff;
display:inline;
color:#000000;
font-family: 'Georgia';
font-size:30px;
}
Change your code to this
Add position:relative to .my-title
.my-title:before{
background-color: #CCCCCC;
content: "";
display: block;
height: 2px;
width: 100px;
position: absolute;
top:50%;
right:100%;
marging:-1px 0 0;
}
.my-title:after{
background-color: #CCCCCC;
content: "";
display: block;
height: 2px;
width: 100px;
position: absolute;
top:50%;
left:100%;
marging:-1px 0 0;
}
I have full-width div with a background image in it. The background image has people in it and I'd like to show a tooltip when you hover over each person.
I don't think you can write image maps with % widths so I'm trying to do this with DIVs. Something like this:
<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>
and Css something like this:
.homepageimage{
width:100%;
max-width:2000px;
height:750px;
margin:auto;
margin-top:-50px;
background: url({{ 'homepage_test2.jpg' | asset_url }});
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
clear:both;
overflow:hidden;
}
.artistmap{
height:100%;
border:2px solid red;
float:left;
}
.artistmap:hover{
content:attr(title);
}
#davidmap{
width:10%;
}
#ceceliamap{
width:15%;
}
#erinmap{
width:5%;
}
#aimap{
width:5%;
}
#tommap{
width:10%;
}
Unfortunately depending on the size of the screen the divs won't line up with the people... What's the best way of solving this?
I posted the above code to cssdesk here:
http://cssdesk.com/vmZSD
Thanks!
Here is a FIDDLE that might help you.
CSS
.americangothic {
float: left;
width: 315px;
height: 384px;
background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
background-size: 315px 384px;
position: relative;
}
.changemediv1 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: red;
border: 3px solid gray;
}
.changemediv2 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: blue;
border: 3px solid gray;
}
.face1:hover ~ .changemediv1 {
background-color: green;
}
.face2:hover ~ .changemediv2 {
background-color: green;
}
.face1 {
width: 80px;
height: 110px;
border: 0px solid red;
position: absolute;
top: 70px;
left: 35px;
}
.face2 {
width: 80px;
height: 130px;
border: 0px solid red;
position: absolute;
top: 30px;
left: 180px;
}
img {
width: 315px;
height: 384px;
}
Just remember that all the divs need to be in the same container.