I ran into a problem, while creating a column for messages on my website. Probably every message will be different lengths, so the divs' height contains them should be automatic. Somehow it is not working. Could you please tell me, which part of my code causes the problem? The container div doesn't expand with the content.
Here is the demo
CSS:
.ConvoCol2 {
width: 600px;
bottom:-50px;
position:absolute;
/*max-height:98vh;*/
margin-left: 0px;
height:91.95vh;
background-color:white;
display:inline-block;
padding-bottom:100px;}
.Typer {
width: 600px;
bottom:0px;
position:absolute;
/*max-height:98vh;*/
left: 0px;
height:100px;
background-color:black;
z-index:2;
padding-bottom:100px;}
.messageblock {
border: 1px solid lightgrey;
width: 600px;
position:relative;
top:0px;
left:0px;
min-height: 20px;
height:auto;}
.messageid {
left: 10px;
position:absolute;
top:10px;
}
.messageid p {
font-family:Arial;
font-size: 1em;
top: -15px;
display:inline-block;
position:absolute;
width: 200px;
font-weight:bold;
left: 65px;}
.msgcontent {
width: 560px;
font-family:Arial;
position:absolute;
left:30px;
top: 60px;
height:auto;
min-height: 30px;
word-wrap:break-word;}
.messageid img {
height:40px;
width:40px;
left: 20px;
}
HTML:
<div class="ConvoCol2">
<div class="messageblock">
<div class="messageid">
<img src="https://scontent-a-vie.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10849833_340959799423688_183902189805735256_n.jpg?oh=ea4fbcd056669d84e5459cd3918bf1c0&oe=550000F1" />
<p> Name Here</p>
</div>
<div class="msgcontent">
asdasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasaasdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasdasdasdasdas
</div>
</div>
<div class="Typer">
</div>
</div>
Thank you.
The moment you use position:absolute or position:fixed it will be cut out and placed on a new layer (if you would compare it with how photoshop works), therefore your browser does not "know" the dimensions anymore and will simply give it 0 height when positioning the other elements. Or as #Terry commented:
It will remove elements from the document flow/layout and will not
interfere with the positioning of other elements, or the dimensions of
their parent(s).
position:absolute;
left:30px;
top: 60px;
Can for example be replaced with:
margin-left:30px;
margin-top:60px;
Related
hello everyone i am designing a web page. i which i want a fixed header.
For this i set position: fixed;. but when i add a anther <div> in the web page and set some top margin for it then margin of header is also changed here is my CSS for header
#header {
width:100%;
height:35%;
color:#303030;
postion:fixed;
}
and the CSS for the div below header is this
#content {
width:250px;
height:350px;
margin-left:50px;
margin-top:75px;
border-style:solid;
border-color:#303030;
border-width:1px;
}
my html
<div id="header">
Predufu
</div>
<div id="content">
</div>
I add little part of my html in this question
now in #content i set margin-top: 75px; but with this the margin of header is also changed why it is happened please tell me i need a fixed header in my web page
I changed some of the CSS attributes and it worked. First I tried with position: absolute, but it also works with position: fixed.
#header {
position: absolute;
top: 10px;
left: 10px;
width:100%;
height: 100px;
color:#303030;
background-color: #aaa;
}
#content {
position: absolute;
top: 120px;
left: 50px;
background-color: #eee;
width:250px;
height:350px;
border: 1px solid 303030;
}
See here with position : fixed --> http://jsfiddle.net/NicHope/n32Mu/
Is it this you are looking for ?
Try to add its top position to header. Also your spelt position wrong.
try this:
#header {
width:100%;
height:35%;
color:#303030;
position:fixed;
top: 0px;
}
JSfiddle Example
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999 on header.
Here you can see my jsFiddle
Here is a picture:
The z-index on the relative positioned element should be lower than the z-index on the fixed position element. Here is a quick example:
HTML
<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>
CSS
body{
height: 3000px;
}
#fixed{
top: 0;
height; 100px;
background: green;
width: 100%;
position: fixed;
z-index: 2;
}
#relative{
position: relative;
top: 100px;
left: 50px;
height: 100px;
width: 100px;
background: red;
z-index: 1;
}
Working Example: http://jsfiddle.net/XZ4tM/1/
Fixing Your Example
The header styling has an issue, there are two colons :: proceeding the z-index properties value.
.header{
width:960px;
background: #43484A;
height:80px;
position: fixed;
top:0;
z-index: 9999; /* Removed extra : here */
}
Fixed Example http://jsfiddle.net/kUW66/2/
What I think you did is correct that using z-index in only a option. I have some work for you to understand.
Please follow the JS Fiddle link
HTML
<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>
CSS
body{
margin:0px auto;
color:#FFF;
}
#header{
background-color:#006666;
width:100%;
height:50px;
position:fixed;
text-align:center;
font:bold 12px Arial, Helvetica, sans-serif;
line-height:50px;
display:block;
z-index:10;
}
#content1{
width:70%;
height:1200px;
margin:0px auto;
background-color:#FFFF66;
position:relative;
top:50px;
z-index:9;
}
#content2{
width:50px;
height:250px;
margin:0px auto;
background-color:#F60;
postition:absolute;
left:50px;
top:50px;
}
Hope that helps.
"Content" is relative to the window, not the grey square.
Did you try to make that grey square position:relative?
Without the HTML and the CSS, it's really hard to know the real cause.
.categories li{
position:relative;
z-index:-1;
list-style: none;
float:left;
width:310px;
height:310px;
color:white;
background:#77647F;
margin-right:10px;
}
check this fiddle :)HERE
I have changed the z-index to -1 to make it work.
I have an image which is e.g. the width 450px, and a container which is only 300. Is it possible to center the image inside the container with CSS, when the width of the image isn't constant (Some images might be 450 wide, other 600 etc.). Or do I need to center it with JavaScript?
This any good? http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Proposition 1 :
.crop {
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
margin:-20px -15px -40px -55px;
}
Proposition 2 :
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:150px;
height:90px;
}
.crop img{
position:absolute;
top:-20px;
left:-55px;
}
proposition 3:
.crop{
float:left;
position:relative;
width:150px;
height:90px;
border:1px solid #ccc;
margin:.5em 10px .5em 0;
}
.crop p{
margin:0;
position:absolute;
top:-20px;
left:-55px;
clip:rect(20px 205px 110px 55px);
}
Proposition 4 (hold-school efficiency):
.container {
width:400px;
height:400px;
margin:auto;
overflow:hidden;
background:transparent url(your-image-file.img) no-repeat scroll 50% 50%;
}
Of course you will need to ajust the .css to suit your own needs
Carry on.
but instead of hiding part of theimage why don't you put it like
<div id="container" style="width: 300px">
<img src="yourimage" width="100%">
</div>
Please look at this http://jsfiddle.net/jaseem/sS7HN/ . What I am trying to achieve is instead of that inner scroll-bar, I want to use the main window scroll bar; SO that I can use the windows vertical scroll bar to go through the content inside the "innerContent" but at the same time I want the outer div to be fixed. is that possible ?
CSS :
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
contentHolder {
margin:0 auto;
width:616px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
HTML :
<div id="header"></div>
<div id="content">
<div id="mainContent">
<div id="contentHolder"></div>
</div>
</div>
<div id="footer"></div>
It's a little unclear what you are trying to accomplish, but I did notice you are missing the hash tags in your CSS. You need # in front of the identifier if you are referring to an ID attribute.
Example: http://jsfiddle.net/hgcax/
CSS
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
#footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
#content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
#mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
#contentHolder {
color:#fff;
margin:0 auto;
width:600px;
height: 400px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
for div elements you have to give #div name here your div name is contentHolder so its #contentHolder
try like this:
#contentHolder {
overflow:auto;
}
or
#contentHolder {
overflow:scroll;
}