I have a simple page with a single div. Inside that div I have an image with dimensions [h:58px, w:173px].
<body>
<div id="main_header">
<img src="logo.gif" style="padding: 0; margin: 0;">
</div>
</body>
It is not wrapped in any other tags. However, Chrome calculates the height of the container div as 63px. There is no associated css with the #main_header. html and body both have margin and padding set to 0.
Can anyone explain why the div's height is coming out to 63 and not 58?
It's because of the parent's line-height. Either set the line-height (or font-size) of the parent to zero, or set the image to display: block.
Related
I am trying to edit the CSS of my Wordpress theme.
I have an element whose height I can successfully change from within Element Inspector, if I specify a certain pixel height, for example:
height=100px;
But when I try to change the height by specifying a percentage, for example:
height=50%;
The element does not change height. Any thoughts on what I'm doing wrong, or how to troubleshoot?
None of the parent elements appear to have any height properties.
Short Answer
Length values defined in percentage(%) gets value based on the value of containing box. Set the height of parent box to any absolute values (like height: 500px).
Long Answer
The default value of length properties(height,width) have default value auto, we should know how these values works(in block display):
auto: Width is set in such a way that the block's overall width(including border,padding,margin) occupies the parent block's width.
However, Height is always set according the calculated height of child elements (including border,padding,margin).
`percentage(%): The length properties gets value according to that of the containing box.
The elements like body and div fill up the available width while having only the height required for the available content.
Before
<body>
<div style="height: 100%"> <!-- This have same affect as "height: auto" -->
Hello World!
</div>
</body>
After
<body>
<div style="height: 500px;">
<div style="height: 100%;"> <!-- sets the height of div equal to 500px -->
Hello World!
</div>
</div>
</body>
http://jsfiddle.net/cMYdw/
The reason you are unable to change height % is because you need to set a 100% height on your parent element, in this case your body.
Now, it doesn't necessarily have to be the body, it can be any parent element, but I've used body in my example to get the idea across. For example, have a look below.
html, body { height: 100%; }
div { height: 100%; background: #F52887; }
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I'm trying to create the following layout in CSS:
It is a typical web layout where all the content is in a wrapper DIV that has a defined width and is centered on the page.
However, the purple background is a CSS gradient and needs to fill the entire width of the browser (and not just the width of the content wrapper). Furthermore, different pages will have different lines of headline/intro text (e.g. some pages might have 3 lines, others just 1) and so the purple background needs to match the height of this content.
I am also using a CMS which places all the content in a wrapper that has a width and is centered with margin:auto.
How can I achieve the layout?
At first I though I could use position:absolute on the headline/intro div. This works great. Except the rest of the content gets hidden behind the headline/intro div.
See an example here: http://jsfiddle.net/5BkX6/1/
I then tried using position:relative on the headline/intro div and then using negative left values together with padding to stretch the background of the DIV while keeping the content centered.
See an example here: http://jsfiddle.net/4DZYr/1/
This method works great, except it creates a horizontal scroll bar. I know I can apply overflow-x:hidden to the main wrapper DIV to hide the scroll bar, but I would prefer not to have it in the first place.
How can I achieve my goal. I do not want to use jquery to get the height of the headline/intro DIV.
This should give you the layout you want ^^
Here is the Html
<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
And here is the style
.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}
I have the following div
<body>
<span style="border:1px solid red; display:inline-block">
Some text<br />
<hr />
some more text
</span>
</body>
In "normal" web browsers, the width of the div is calculated to fit the text. And the hr is 100% of the div.
But in IE7 the hr causes the div to expand to 100% of the body.
Is there any clever css I need to add somewhere so it behaves correctly in IE7?
Please note, I can't set any fixed width.
In IE6/7, display:inline-block only works on elements that are inline by default (e.g., span). So if you try setting a div to display:inline-block, it won't work in IE6/7.
An inline element will size itself to the width of its content. An inline-block element will do the same by default, if it's not given an explicit width. If the hr is 100% (100% of its parent, which in turn is 100% of the child), then there's a circular definition for the hr width that may not work as expected (100% of what? 100% of itself).
To avoid a circular definition for the width that may not work as expected in some browsers (especially IE6/7), either the container of the hr (div, span, or whatever) should have a defined width (in px, %, or em) or the hr itself should have an explicit width (in px or em). Otherwise, the width is not defined in any identifiable way, and it's left up to the browser to decide what to do by default.
If you can't set any widths, that may rule out using an hr tag. And based on the tests I ran, the options don't look very good for CSS solutions either (without setting a width).
Edit:
I think the only way to do this without setting widths or relying on JavaScript or jQuery, is if it's acceptable to have a horizontal line after every line of text (including any long paragraphs that wrap around to the next line, if there are any). In that case you could add a bg image to the container that contains a horizontal line at increments equal to the line-height of the text, displayed at a vertical offset equal to the line-height so a line doesn't appear at the top of the first line of text.
HTML
<div class="main">
<p>This is the first line.<br/>
This is the second line.<br/>
This is a long line that will wrap around to the next line if the container is not very wide.
</p>
</div>
CSS
.main {
background: url(image.png) repeat-x left 15px;
}
p {
font-size: 12px;
line-height: 15px;
}
jsfiddle demo
The width property of the <hr> tag has been deprecated, so you're styling options are limited on the <hr> tag.
15.3 Rules: the HR element
Index of Attributes
A more modern approach is to use the border property of a <div> instead.
Image rendered by IE 7:
Image rendered by Chrome 19:
jsFiddle Demo
HTML
<body>
<div style="border:1px solid red; float:left;">
<p>
Some text
</p>
<p class="border-top">
some more text
</p>
</div>
</body>
CSS
.border-top{
border-top:#000 1px solid;
padding-top:1em;
}
Note: IE 6 & 7 don't support display:inline-block, so you might need to use float:left instead. The article below compares the use of the aforementioned properties:
CSS display: inline-Block: Why It Rocks, And Why It Sucks
Found a method at a blog. The original one required modernizer.js. I've edited it.
HTML:
<div class="hrdemo"><hr /></div>
CSS:
.hrdemo hr {
display:none
}
However, if your div.hrdemo is inside some floated container; you may have to assign a fixed width for it (for IE7).
I'm trying to make the parent div inherit the height that the responsive child image sets... but it's not working.
This is for a responsive website, so when resizing the browser, the image resizes. The problem is that if I set a height on the parent .mosaic-block-three element, then the image appears to stay fixed at that height.
If I set the .mosaic-block-three element to height: auto, then it fails completely and goes down to 0 height.
What am I missing to make this scale smoothly? I can rearrange and add css, html or javascript, whatever I have to do to get it done. I've tried for hours so any help is GREATLY appreciated :-)
The example page is here: http://bit.ly/KzfN2g
My goal is to replicate how the images are perfectly responsive on this page, but with the addition of the rollover mosaic text: http://bit.ly/LIrJv7
<div class="mosaic-block-three magnifier2">
<div class="details">
<a class="pf_title_link" href="/portfolio/vignette-tiered-architella-shades/">Vignette® Tiered™ Architella® Shades </a> </div>
<div class="mosaic-backdrop" style="display: block; ">
<img src="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01-1024x564.png" class="attachment-large wp-post-image" alt="home-office-vignette-tiered-architella-shades-01" title="home-office-vignette-tiered-architella-shades-01">
</div>
<!-- end mosaic-backdrop -->
</div>
This is working with these few CSS changes (tested in Chrome only):
mosaic.css line 46
.mosaic-block-three {height: 250px}
mosaic.css line 74
.mosaic-backdrop {position: absolute}
promotion.css line 92
.details {margin: 15px 20px; margin: 0 20px;}
responsepress.css line 155
.mosaic-backdrop img {float:left}
You might want to move the border-radius:5px to the img now also.
You should probably use an img tag instead of a background. Then set a max-width of that image. don't set a width/height on the parent element.
That should work!