We Keep Coding

How to find height and width of point where we want to place our div in #css

I have created 4 div in my html. Div contains heading, paragraph and parallax image in background. Now what i want to put my text i.e heading and paragraph in some exact point inside div.
How to find the dimension of point where i want to place my text inside div.
Help guys.
div{
height: 600px;
/* background-color: grey; */
margin: 0px;
padding: 0px;
}
h1{
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
line-height: 90px;
}
p{
text-align: center;
}
.center{
margin: 0 auto;
width : auto;
padding-top: 250px;
}

In this if you can place the header and paragraph in anywhere in the div by using position property like this,
.div{
height: 600px;
width:100%;
float:left;
position:relative;
background:gray;
}
h1{
position:absolute;
top:40px;
right:40px;
}
p{
position:absolute;
top:50px;
right:40px;
}
In above case, h1 40px from top and 40px from right in inside the div.you can move the absolute positiond elemet(h1 or any..) anywhere you want by change the values.
make sure h1 and p must inside the div that have position:relative;

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;
}