I have a jsfiddle here - http://jsfiddle.net/stevea/Jpu5b/2/ - with a DIV that contains another DIV that contains an img. I haven't specified the width or height of the inner DIV so it takes on the width of the parent DIV and the height of the img it contains.
<div id='box'>
<div id='innerBox'>
<img id='cateye' src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg'/>
</div>
</div>
My question is, why is the height of the inner div about 5px larger than the img it contains?
If you want to keep img as an inline element just add line-height: 0; to your reset.
So it would look like this:
* {
margin:0px;
padding:0px;
line-height: 0;
}
Here is the updated fiddle http://jsfiddle.net/Jpu5b/18/
Otherwise Michael St Clairs's answer will work well.
Add this code and it should fix it
#cateye {
display:block;
}
Related
I have a div with 15% Height and another div inside it with 15% height as well. Inner div has a <p> tag and this <p> tag is dropped out from the inner div but when I remove the height of the inner div everything works fine. Here is my html code and CSS code.
.header {
background-image: url("images/headerBg.jpg");
height: 15%;
width: 100%;
}
.title {
background-color: red;
float: left;
height: 15%;
}
<div class="header">
<div class="title">
<h2>Title</h2>
</div>
</div>
See below image for reference. Red thing is inner div and "Title" should be inside that Red thing but it's not html
You need to change height to min-height in .title class
.header{
background-image:url("images/headerBg.jpg");
height:15%;
width:100%;
}
.title{
background-color:red;
float:left;
min-height:15%;
}
It will give you following view (I just use background-color instead of image, you can use whatever you want).
You can remove float left and and play around with width.
This look will comes up if you will remove float left
And this look will comes up with width, I just added 100px, you can adjust it according to your requirements
this is my html (for example)
<div id="wrap">
Some relative item placed item
<div id="fixed">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
</div>
here is my css:
#wrap{
float: left;
position: relative;
width: 80%;
background:#ccc;
}
#fixed{
width:inherit;
}
I want to make the second div that is 'fixed' to have same width as the first 'wrap'. I tried a lot, but i can't do it.
Is it possible to do this without any javascript?
Any suggestion..please.
here is the fiddle for this:
http://jsfiddle.net/sris/tktdf1kk/
You need to leave your width alone. Divs already expand 100% of their containing div. The reason your text is not wrapping is because it's all one word. Add the CSS:
#fixed {
word-wrap: break-word;
}
I need to place 2 fixed width DIVs side by side inside another big fixed width DIV and it is working. This is the code that I have written :
<div id="mainDiv">
<div id="divLeft"> <img src="bla bla bla" > </div>
<div id="divRight"> Normal Text Here..... </div>
</div>
This is the CSS:
#mainDiv { width:1100;overflow:hidden; }
#divLeft { width:720; float:left;}
#divRight { width:380; float:right;}
The problem is, when I placed the image of size 720X480 into the first DIV, the height of the first DIV ("divLeft") is becoming 485. Why its giving an extra
5px ?
You can view the page here : http://www.touchmedia.ca/TestPos.php
Please Note the following:
I did overflow:hidden for the main div, b'cos, otherwise, the float will remove the effect of outer div.
I have hardcoded only the width and not the height.
main div width (1100) = left div width (720) + right div width (380)
Thanks a lot,
Isaac
Add:
#divLeft img {
display: block;
}
add this to your style sheet:
body{
margin:0;
padding:0;
}
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)