I hope that someone can help me about this problem. I have structure like this
<div id="Div1" style="height:auto">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" style="height:100%;"></div>
</div>
</div>
Also I put in my css file
html,body
{
height: 100%;
}
Problem is that neither Div3 nor Div4 have the expected height of 100%, I check size of first two divs with firbug and they are ok, filling the whole screen.
Sorry for my bad English, I hope that you understand my question :)
Have a look at this. When using a percentage, each div will be affected by the height of it's parent.
In this example the html,body has a height of 100% and the percentage of each div child is then relative to it's parent. Note how each div is half the size of it's parent div, each step it shrinks by half the size.
Updated with all percentage example
Simple example
HTML
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
div {
height: 100%;
background: #F00;
}
div div {
background: #FF0;
height: 50%;
}
div div div {
background: #000;
height: 50%;
}
div div div div {
background: #F30;
height: 50%;
}
First of all write height in inline style
<div id="Div4" height:100%;"></div>
change to
<div id="Div4" style="height:100%;"></div>
The key is to set the height of the div with id "Div1" to something other than "auto". Try 100% or a specific value like this
<div id="Div1" style="height:100%;">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" height:100%;"></div>
</div>
</div>
Related
I'd like my div to be 175px width if the text inside is shorter than this value or to take 100% of cointainer width if the text is bigger than 175px. How can I achieve this?
So far I tried to play with width, min-width and max-width but can figure it out.
.text-div {
min-width: 175px;
max-width: 100%;
border: dotted 2px;
}
<div id="container">
<div class="text-div">
Short Text
</div>
<div class="text-div">
Loooooooooooooog Text
</div>
</div>
A hacky approximation using clamp(). You need an extra wrapper that has a shrink-to-fit behavior (I used float but you can consider inline-block). 100% of the child width will refer to its own width since its parent is shrink-to-fit.
I use clamp and compare 100% with 175px.
If 100% > 175px we have (100% - 175px)*10000 a big positive value clamped to 100vw, your full width behavior (we have to hide the overflow)
If 100% < 175px we have (100% - 175px)*10000 a big negative value clamped to 175px
#container {
overflow:hidden;
}
.text-div {
width: clamp(175px, (100% - 175px)*10000, 100vw);
background:yellow;
margin:5px;
}
.wrap {
float: left;
clear: left;
}
<div id="container">
<div class="wrap">
<div class="text-div">
Short Text
</div>
</div>
<div class="wrap">
<div class="text-div">
Looooooooooooooooooooooooooong Text
</div>
</div>
</div>
Here is how you could achieve the desired result by adding some Javascript.
document.querySelectorAll('.text-div').forEach( div => {
if(div.clientWidth > 175){
div.classList.add('long-text');
}else{
div.classList.add('short-text');
}
})
.text-div {
display: table;
border: dotted 2px;
}
.short-text{
width: 175px;
}
.long-text{
width: 100%
}
<div id="container">
<div class="text-div">
Short Text
</div>
<div class="text-div">
Looooooooooooooooooooooooong Text
</div>
</div>
Please consider the problem posed by the following code:
<div id='container'>
<div id='topLeft' style='background-color:red;float:left'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
In a fiddle I've created, this produces the following result:
The problem with this, as far as the page I'm working on is concerned, is that space above the yellow div labelled bottom, caused by the additional height of the green div (Top Right). I want the yellow div to be right up against the bottom of the red div (Top Left), regardless of the height of the green div.
Now, this is easily enough fixed by using positioning, as follows (fiddle here):
<div id='container' style='position:relative'>
<div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large;position:absolute;left:100px;z-index:-1'>Top Right</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Which produces the following result:
That's exactly what I want. Unfortunately, because the green Top Right div is now positioned absolutely, I now have to specify its left position to ensure that it still appears to the right of the red (Top Left) div.
In the application I'm writing, I'm having to expend a lot of effort to continually position the equivalent of this green div to the right of the red div, when no effort would be required at all if it didn't have the position:absolute attribute. Without that, it'd just naturally appear after the red div, as it did in the result of the first code sample.
So my question is: Is there a way to achieve the same result as I have with my solution - that is, the top of the yellow div being up against the bottom of the red div - without adding position:absolute to the green div?
Update following Ned Rockson's answer, I should add that explicitly setting the height of any of these divs or a wrapper div isn't possible either.
#container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#topLeft {
background-color: red;
}
#wrapper {
position: relative;
}
#topRight {
background-color: green;
font-size: x-large;
position: absolute;
left: 100%;
top: 0;
width: 5em; /* THIS IS THE ONLY "MANUAL" SETTING */
}
#bottom {
background-color: yellow;
width: 100%;
}
<div id='container'>
<div id='wrapper'>
<div id='topLeft'>
Top Left
</div>
<div id='topRight'>
Top Right
</div>
</div>
<div id='bottom'>
Bottom
</div>
</div>
This solution requires you to "manually" set the width of the topRight element, but heights are automatically handled by the CSS.
You can wrap the top left and top right divs in a div with height set and overflow set to hidden. It's not a very elegant approach because the outer div's height is set, but it works for this particular problem.
<html>
<body>
<div id='container' style='position:relative'>
<div style='overflow:hidden; height:18px'>
<div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
</body>
</html>
If you want the upper two DIVs bottom-aligned despite their different height, you can assign them this instead of floats:
#topLeft, #topRight {
display: inline-block;
vertical-align: bottom;
}
Here is the complete code:
#topLeft, #topRight {
display: inline-block;
vertical-align: bottom;
}
<div id='container'>
<div id='topLeft' style='background-color:red;'>Top Left
</div><div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
<div id='clearDiv'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Note that I moved the closing </div> of the .topLeft element into the next line to avoid any spaces and linebreaks in the code.
Alternative solution using flex:
If you need topLeft and topRight to have the same height, you can wrap them in a parent container and assign display: flex to this container:
#wrapTop {
display: flex;
}
<div id='container'>
<div id="wrapTop">
<div id='topLeft' style='background-color:red;'>Top Left</div>
<div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
</div> <div id='clearDiv'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
I am trying to create a layout like this:
this is what I have so far:
HTML
<div id="wrapper">
<div id="top">
<div id="top">100% width and 45px height </div>
</div>
<div id="middle">
<div id="middleleft">Middle Left 20%</div>
<div id="middlecenter">Center 60%</div>
<div id="middleright">Middle Right 20%</div>
</div>
<div id="bottom">
<div id="bottom">100% width and 30% height</div>
</div>
CSS
#top{
width:???;
height: 45px;
}
#bottom {
width: ???;
height: 30%;
}
http://jsfiddle.net/Jn6x6/
But I cannot make the top and buttom take the 100%.
Is this the right approach or should I try something different?
Thanks.
Add
#wrapper #middle {
display:table;
width: 100%;
height: 100%;
}
to the CSS of your JsFiddle.
See http://jsfiddle.net/Jn6x6/1/
Does
#top,
#bottom {
width: 100%;
}
Not do what you need?
At
< div id="top">
< div id="top">100% width and 45px height < /div>
< /div>
try to give the 2nd id the name "top_box" and give the 1st id (#top) a width of 100% and the 2nd one (#top_box) a width of inherit
Also, try testing your HTML code in a newly created HTML file (example.html) and open it in a browser.
The red and the green divs are aligned one next to another. How can make the red div be the same height as the green div?
You should have a div that contains both elements and is clearfixed
<div class="wrapper clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
You then add position relative to the wrapper:
.wrapper {
/* remember this is clearfixed */
position: relative;
}
You let the green container float to the right:
.green {
float: right;
width: 50%;
}
Then you position absolute the red and let it know that it should use all the space of the wrapper:
.red {
position: absolute;
left: 0;
width: 50%;
top: 0;
bottom: 0;
}
Note that this case will only work when the green container is larger than the left one.
That is problematic - because to make heights same, you need to add div between document and red and green div, this div must have height defined, so you can set heights for both div-s inside to 100% eg.
<div style="height: [must be defined]">
<div id="red" style="height: 100%; ..."> ... </div>
<div id="green" style="height: 100%; ..."> ... </div>
</div>
<div id="black" style="height: 100%; ..."> ... </div>
BUT - this will break, when one of the divs will be higher than other - fix it by using overflow
PS. For some cases it is good to use tables here, since table cells have always same height
You can use a table as wrapper. First and last tr are optional. But if you need first or last tr so set a height. browser needs this to calculate correct height for middle tr.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<style type="text/css">
html, body {height:100%; padding:0; margin:0;}
#wrapper {height:100%;width:100%;border-collapse:collapse;}
#wrapper td {vertical-align:top;}
#wrapperFirst, #wrapperLast {height:1px;}
</style>
<body>
<table id="wrapper">
<tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr>
<tr><td style="background-color: #ffff44;">text</td></tr>
<tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr>
</table>
</body>
</html>