We Keep Coding

Make child height larger than parent

Not sure if I'm thinking of this the entirely wrong way but some guidance would be much appreciated. I'm essentially trying to get a child div larger than it's parent.
Please see image for what I'm trying to achieve
However the height on the container element will be smaller. Am I right in thinking I should have them as separate elements or is there a better practice way?

You can use position and achieve what you want. I would say, a combination of position, negative margin will do the trick:
.parent {background-color: #000; height: 100px;}
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;}
.parent {margin-top: 100px;}
.parent .child {position: relative; top: -50%;}
<div class="parent">
<div class="child"></div>
</div>
Preview:
If you don't know the height of the content, you can use translate to fix it to the centring:
.parent {background-color: #000; width: 75%; margin: auto;}
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;}
.parent {margin-top: 100px; position: relative; min-height: 100px;}
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);}

Simply transform: scale(1.2); your child element
#parent{
margin: 40px;
background:#000;
}
#child{
background:#d8d8d8;
height:140px;
box-shadow: 0 0 40px rgba(0,0,0,0.2);
position:relative;
margin:0 auto;
width:60%;
transform:scale(1.2); -webkit-transform:scale(1.2);
}
<div id="parent">
<div id="child"></div>
</div>

Break out from relative parent container

I'm sure this cannot be done with CSS, since all what's inside position: relative will be inside of it. So I was wondering maybe there was a javascript solution.
Basically what I want to achieve is this: http://jsfiddle.net/ZVL8W/3/
But if you wrap it up with relative container and fixed width it won't work like in this: http://jsfiddle.net/ZVL8W/8/
And it must be in relative container, but those two elements must break out from it and work like in first link example. Is this possible somehow maybe with javascript? Note that I cannot remove relative parent container.

try this http://jsfiddle.net/ZVL8W/9/
HTML,BODY {
width: 100%;
height:100%;
margin:0;
padding:0;
}
.container {
position: relative;
width: 100%;
height:100%;
}
.left-box {
width: 100px;
height: 100px;
background-color: red;
display: block;
position:ABSOLUTE;
top:50%;
left:0px;
margin-top:-50px
}
.right-box {
width: 100px;
height: 100px;
background-color: blue;
display: block;
position:absolute;
top:50%;
right:0px;
margin-top:-50px
}
or this http://jsfiddle.net/ZVL8W/10/
.container {
position: relative;
width: 200px;
}
.left-box {
width: 100px;
height: 100px;
background-color: red;
display: block;
position:fixed;
top:50%;
left:0px;
margin-top:-50px
}
.right-box {
width: 100px;
height: 100px;
background-color: blue;
display: block;
position:fixed;
top:50%;
right:0px;
margin-top:-50px
}

CSS can a div automatically be sized to fit the rest of the browser

I have a page I'm creating where I want to have to columns the first colomn has a fixed a sized and the second column has to fill the rest of the window width. This is what I came up so far but it doesn't seen to work.
HTML:
<div id="container">
<div class="nav"></div>
<div class="page">my page content</div>
</div>
CSS:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
float:left;
background-color:#FFF;
}
JS FIDDLE

Just remove float: left and add width: 100% to .page
http://jsfiddle.net/scNSL/2/

You probably can do it like this: http://jsfiddle.net/scNSL/4/
<div id="container">
<div class="page">
<div class="nav"></div>
Inhalt
</div>
</div>
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width:100%;
float:left;
background-color:#333;
}

Try this,
.page{
height:500px;
width:100%;
background-color:#FFF;
}
Note: Removed float:left; & added width:100%;

Instead of writing it myself...
Check out this article for more information:
http://css-tricks.com/fluid-width-equal-height-columns/
Should help you learn more about equal height columns 100% height etc.

Try this:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:40%;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width: 60%;
float:left;
background-color:#333;
}

The classical way of creating a fixed + fluid column layout is to float an element next to another element with padding:
HTML:
<div class="container">
<div class="nav"></div>
<div class="page">content</div>
</div>
CSS (float):
.container {
color: #FFF;
}
.nav {
background-color: #666;
float: left;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
height: 200px;
padding-left: 200px;
}
This has some drawbacks, particularly when the .nav and .page elements have differing heights, or when you want to add a border around the .page element.
The modern way of creating a fixed + fluid column layout is to use flexbox:
.container {
color: #FFF;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.nav {
background-color: #666;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
-webkit-flex: 1;
flex: 1;
height: 200px;
}
fiddle (pardon the BEM classes, they're used so that the difference in CSS between these two methods can be seen more readily)

True Fit (allows for borders)
Change to this (see fiddle):
.page{
height:500px;
overflow: hidden; /* or auto */
background-color:#FFF;
}
By not floating the .page, and setting an overflow other than visible, the browser fills a block level element with the space beside the floated element (good explanation here).
Why this can be better than setting width: 100%
Compare these div elements with borders. One with width at 100%, one with the overflow set as above.

Footer stuck in slideshow

I imported a wow slider to my webpage and now my footer is stuck in it. I tried using www.cssstickyfooter.com but it didn't work. I think is has something to do with the position element the slideshow uses. What would be causing this?
LIVE DEMO: http://epicureancateringaz.com/New/123
#footer{
position: relative;
margin-top: -100px;
height: 100px;
clear:both;
background-image:url(../images/backgrounds/footerback.png);
}
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:1000px;
margin:9px auto 9px;
z-index:90;
border:9px solid #FFFFFF;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}

You've inserted div#footer into your slideshow div. Just pull it out.

CSS/JQUERY make div scrollable without showing scrollbar

is there any way to make a div scrollable with overflow-y:hidden; and overflow-x:hidden?
i'm trying without success, maybe i need some js or jquery script?
i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now).
itryed:
.get-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
bottom:0;
clear:both !important;
left:0;
right:0;
top:11%;
margin:0 auto;
background:#fff;
max-height:800px;
overflow-y:no-display;
overflow-x:hidden;
display: block;
}
thanks
EDIT
.log-widget-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
width:99%;
margin:0 auto;
background:#fff;
height:800px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow: scroll;
height:800px;
width:100%;
}
it shows right scrollbar anyway

Let's create a div with a width of 200px: (note the overflow:hidden)
#sidebar{
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
Inside that div we will create the 'scrollable' div. See:
#sidebar #scroller{
width: 215px;
height: 300px;
padding-bottom: 15px;
overflow: scroll;
}​
Altough we give it overflow:scroll, the scrollbar isn't visible. This is because this div has a total width of 215px which will make the scrollbar disappear outside the div.
Also see: http://jsfiddle.net/TBsN8/

fixed as shown thanks to Sebass van Boxel
.log-widget-list{
position:absolute;
display: none;
width:98% !important;
top:11%;
max-height:500px;
overflow: hidden;
bottom:0 !important;
left:0;
right:0;
margin:0 auto !important;
}
.log-widget-list .scroller{
overflow: scroll;
max-height:500px;
padding-bottom:3%;
width:104% !important;
}