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>
Related
Can you please help me to place the buttons in the bottom center of the horizontal Layout see picture below.
Ps: the top vertical layout has a dynamic height.
Here's my HTML code:
<html>
<body>
<div class="container" style="height: 100%">
<div class="v-panel-content v-panel-content-task-search-list-view v-scrollable" tabindex="-1"
style="position: relative; height: 100%; width: 275px; border-radius: 10px; border-style: none;">
//-----------------------Vertical Layout
<div location="loc1"></div>
<div location="loc2" style="margin-left: 8px;"></div>
<div location="loc3"></div>
<div location="loc4"></div>
//-----------------------HorizontalLayout
<div location="buttonLayout"></div>
</div>
</div>
</body>
</html>
The dynamicity of the above <div> won't make a difference if it's positioned to flow with the document (not absolute, or fixed).
Your bottom <div> should have the CSS properties text-align: center; applied to it. As you're probably aware, this centralises inline elements within the <div>
As your buttons may not be inline elements, we need to set them to display: inline-block;. This will position them as text would be positioned within their parent element.
Make sure that they don't have a float property applied to them, or else they will align according to this declaration.
See the below fiddle
.lower {
text-align: center;
}
.button-lower {
display: inline-block;
padding: 5px;
background: green;
}
<div class="lower">
<a class="button-lower" href="#">Vider</a>
<a class="button-lower" href="#">Chercher</a>
</div>
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>
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 have the following div table:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div id="innerDiv"></div>
</div>
</div>
</div>
Inside the cell is a div with the id "innerDiv". Is there a way to position this div such that its top/left corner is located anywhere within the cell? I tried all the css position values but none work.
We're not supposed to give the same element table-cell display and relative position. It's not supported equally between modern browsers (try this in FF).
If it's the only way you can do things on your specific case, add a relatively positioned wrapper div inside the cell.
For example:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div class="relativeDiv">
<div id="innerDiv"></div>
</div>
</div>
</div>
</div>
.relativeDiv
{
height: 100%;
width: 100%;
/* You may need some negative margin
if there's a padding on the table cell */
position: relative;
}
#innerDiv
{
position: absolute;
/* You're now free to set the top and left attributes freely */
}
For further reading:
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
Does Firefox support position: relative on table elements?
You should use position property in outer div explicitly（such as: relative,fiexd,absolute)
div {
position: relative;
};
#innerDiv {
position: absolute;
left: 10px;
}
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/