Here is my Question I have an HTML like this
<div class='A'>
<div class='B'>Hello World</div>
This div Height is more than first one due to the content size
</div>
now I want to get the height of Parent div with class 'A' and that height has to be given to the div with class 'B'
only using CSS3. is it possible? Some-body please help me.
Thank you...
CSS is not a programming language so, no, you cannot do this as you state it.
As mentioned before CSS is not a programming language you cannot achieve that with it however you can use jQuery instead:
$(document).ready(function(){
$(".B").css("height", $(".A").height());
});
Or you can do this with CSS:
.A {
height: 300px;
}
.B {
height: inherit;
}
If you're explicitly setting the height of the parent, you can set the child's height to be 100% to achieve this effect. View on JSFiddle.
css
#parent {
background: #eee;
height: 200px;
}
div div {
background: #aaa;
height: 100%;
}
HTML
<div id="parent">
<div>lalala</div>
</div>
If you're not explicitly setting the height, you'll need to specify the question more. Divs are block level elements and want to take up an entire row to themselves. The code you posted will result in the child div and the text of the parent being on different rows. Because of that, it's hard to know what height you're looking for...maybe if the parent just had text? And then, what do we do with the div in relation to the text? Overlap it? Or push the div out the bottom of the parent?
If you want to set the same height to upper and to lower text
You can add to parrent
.A
{
display: table;
}
And you can add to child
.B
{
display: table-row;
}
Related
I'm stressing out because of a mindbreaker and I'm probably missing some essential, but easy thing.. And although I've done this many times before.. it's going wrong now.
So I'm creating a web app and always my starting point is
html, body {
height:100%;
width:100%;
}
And some of my inner elements have a set height in percentages and some in pixels.
However, to have some structure in my code, I'm setting up div's without a set height. Let's set up the following situation.
HTML
<div class="wrapper">
<div class="thisIsAStructureItem">
<div class="innerElement">
And just some untagged piece of text
</div>
</div>
</div>
CSS
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
/* nothing, not even height */
}
.innerElement {
height: 17.5%;
}
But in any editor or browser, because I haven't set a specific (%/px) height on the second element, it shows up as 0px, including all the inner elements.
So stupid as this might be.. What am I doing wrong?
UPDATE: See this JSFiddle
The situation makes it appear a set height is necessary, therefor so my title. Feel free to adjust to something more suitable
The situation above is a replica of a to-build-situation and using exact pixels is (at that above part) not an option. Please don't advice 'use X pixels'.
Original: http://jsfiddle.net/o0Lfyt0m
Updated: http://jsfiddle.net/o0Lfyt0m/1/ (from code sample below)
The innerElement is trying to display as 17.5% as tall as the parent element. The problem is that the parent element does not have a defined height. As a fall back to calculating 17.5% of undefined, the div's height is essentially defaulting to "auto" and assuming the height of it's content, which is based on the size of the font, line-height, padding etc.
Edit: A nice feature of CSS is that an elements styles can be inherited from it's parents. You can add a structure class which will inhert the height from it's parent element, which seems to be your intent.
You could even add this class to the body element, since it's height and width are identical to html... just not certain if the HTML element can be styled in all browsers, so I didn't do that.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: 100%;
width: 100%;
}
.struct {
height: inherit;
width: inherit;
}
.innerElement {
height: 17.5%;
}
<div class="wrapper">
<div class="struct"> <!-- .struct inherits height/width from .wrapper -->
<div class="innerElement"> <!-- height calculated based on .wrapper -->
And just some untagged piece of text
</div>
</div>
</div>
Yes, you need to set the height 100% for that div too. Otherwise it's height is unknown and will not be able to take exactly the 100% height and innerElement height is not calculated accordingly.
To make sure, you must use the height 100% for that div too.
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
height: 100%;
}
.innerElement {
height: 17.5%;/* calc from it's parent div height i.e. thisIsAStructureItem*/
}
You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
I have four div tags. One of them is .main div. The rest of the are inside .main with .sub classes. What I want is first to show 1st div tag inside .main and the rest will be placed on the right side of the first div tag but the overflow of the main div tag is hidden so that the other two div tags are not shown only the first is visible. I am trying to achieve this with this code. How can I achieve this?
.main {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
}
.sub {
width: 100%;
height: 300px;
float: left;
}
.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
Assuming I've understood you correctly, and you want to see all three sub divs, one on the left, and two on the right, the problem is that you've set the widths to 100%, so there is no space to have them floating next to each other.
You need to set their widths so that they don't take up the full width of the container, for example they can each be 50% wide.
You also need to set the heights of the two divs on the right so that their total height is the same as the div on the left if you want them to line up.
Update:
To make it so that only the left div is visible initially, I think it's best you add another wrapper div around the the sub divs like this:
<div class="main">
<div class="wrapper">
<div class="sub blue"></div>
<div class="sub green"></div>
<div class="sub orange"></div>
</div>
</div>
With a width set to 200%.
.wrapper {
width:200%;
}
Then when you want the right hand divs to become visible, you can slide them onto the screen by repositioning the wrapper div, either with a transform, relative position, or margin setting.
Updated fiddle example
I don't know why but i have found that if you have space below the first item in this situation it won't work as expected..
so make the height of sub match then it will work:
.sub {
width: 100%;
height: 500px;
float: left;
}
http://jsfiddle.net/Ex9EC/2/
probably this is totally wrong approach though so wait for someone who knows to comment maybe?
Also I think there might be something about how the position of the outer/container div has to be set (to relative,absolute or fixed) which is why i added that but it seems to work without it too:
http://jsfiddle.net/Ex9EC/3/
I want to create a header with 2 divs in it. The left div needs to be the same height as the right one, but the right one can scale based on its contents.
The left div's contents need to be vertically aligned to the middle.
I tried something like this:
<header>
<div id="test1">
<div>LOGO</div>
</div>
<div id="test2">
<h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
</div>
</header>
Use display: table-cell;
Working Demo
Edit:
In case if you want jQuery Solution it works on all browsers
You can fake this using overflow, padding and margins. It's completely cross browser compatible and doesn't need any JavaScript or anything. Just CSS. For example:
.header {
overflow: hidden;
}
.test {
background: red;
padding-bottom: 2000px;
margin-bottom: -2000px;
float: left;
width: 100px;
margin-right: 20px;
}
DEMO
There is also always faux cols (using a background image) but this is a better method that doesn't need images.
If you don't mind a bit of javascript:
$(document).ready(function() {
setHeight($('#test1'), $('#test2'));
// When the window is resized the height might
// change depending on content. So to be safe
// we rerun the function
$(window).on(resize, function() {
setHeight($('#test1'), $('#test2'));
});
});
// sets height of element 1 to equal the height of element 2
function setHeight(elem1, elem2) {
var height = elem2.height()
elem1.css('height', height);
}
DEMO
display: flex;
in the parent container works for me
I have two <div> elements, one next to the other. Both have the CSS attribute display: inline-block;. Now the second <div> element has a fixed width of 100 px, whereas the first <div> element doesn't have a fixed width: it depends on the size of the window.
My problem is that the first <div> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <div> elements can align one next to the other at all times.
I've looked at posts with similar questions, but none really dealt with the case of inline-block.
EDIT: Here is a jsfiddle: http://jsfiddle.net/y3sXu/ I want the first <div> to provide some room for the second <div> on the same line.
There's no particular reason to use display: inline-block to do this.
Here's a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/
<div id="container">
<div id="DivB">b</div>
<div id="DivA">a</div>
</div>
#container {
overflow: hidden;
}
#DivA {
overflow: hidden;
}
#DivB {
float: right;
width: 100px;
}
This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.
So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).
Your code should look like this:
.fixed-width-element {
display: inline-block;
width: 150px;
}
.variable-width-element {
display: inline-block;
width: calc(100% - 150px);
}
I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/
I have gone for a traditional two column layout, as it seems like the best way to solve your problem.
float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.
best way I can figure doing it is with absolute positioning:
div#TextB{
position:absolute;
right:10px;
top:10px;
}
div#master{
margin-right:120px;
}
http://jsfiddle.net/Vnxr7/1
There is one very ugly solution:
Set the overflow of the outer div to hidden, take the div out of the dom using position:relative, setting the left to -100px and the width to 100%.
You have to play around with the display, position and left/top etc. or get back with some more details so one could know what you want to achieve.
what about this ?
div {
background:green;
margin-right:100px;
}
#TextB{
width:100px;
background:red;
float:right;
margin:0px;
}
Updated version
Just give the outer div a padding of 50px on both left and right side
EDIT
Place this where u want to put the gap:
<div width="100px" height="1em"> <div>