This question already has answers here:
HTML/CSS: Making two floating divs the same height
(14 answers)
Closed 8 years ago.
I've got two columns, one with a flexible width, and one that should expand to the remaining width.
I have this set up like this:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 80px;
float: right;
background: #aafed6;
position:relative; /* Needed for positioning an element absolutely inside this dib */
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Here's the fiddle: http://jsfiddle.net/dms53yt8/
My problem is, I want the right div to have equal height as the left div. How can I do this while still preserving the current structure?
Thanks! Uri
How about using display: table for container div & display: table-cell for child divs?
Here is the edited jsfiddle - http://jsfiddle.net/dms53yt8/4/
This solution works http://jsfiddle.net/ru02qxLx/
CSS Additions
Add position: relative; to your .container class. Then add position: absolute;, top:0;, bottom:0; and right:0; to your .right class
.container {
height: auto;
overflow: hidden;
/* Added */
position:relative;
}
.right {
width: 80px;
background: #aafed6;
/* Added */
position:absolute;
top:0;
right:0;
bottom:0;
}
You can add padding-bottom and margin-bottom to both divs. please check fiddle.
.right{
padding-bottom: 500em;
margin-bottom: -500em;
}
.left{
padding-bottom: 500em;
margin-bottom: -500em;
}
DEMO
Related
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 8 years ago.
I have a wrapper, main and aside elements inside.
I want to have:
wrapper - no fixed height, stretching to the content's height - the longer column of the 2.
aside - left column, width 30%, min-width:340px(with padding), height 100% of wrapper.
main - right column, width auto.
When I set the wrapper to position:relative and aside to position:absolute the 100% height is working, however that breaks the main element's width. Is there any other way to achieve what I need with CSS/SASS only and without being "hackish" with hidden divs and such?
.wrapper{
border:$contentborder;
background: $contentgradient;
border-radius:3px;
text-align: center;
margin: auto;
}
main{
text-align: left;
overflow-x: hidden;
}
aside{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
min-width: 340px;
padding: 20px;
padding-left: 0;
height: 100%;
text-align: left;
}
http://jsfiddle.net/2m503b8e/
Assign some height for your parent div for instance height:209px; to your .wrapper
DEMO
You can also use min-height: value to your main and aside
You need to add a margin-left to main, that equals the width of aside:
main {
margin-left: 340px;
}
You might be interested in creating breakpoints for the min-width/width values though. For screens with viewport size of greater than 1033px, the width of aside will become 30%, so your margin-left needs to be 30%.
#media screen and (min-width: 1033px) {
main {
margin-left:30%;
}
}
Fiddle:
http://jsfiddle.net/2m503b8e/5/
There are several ways of achieving this. Probably the easiest is to make the elements display like a table:
.wrapper{
border:$contentborder;
background: $contentgradient;
border-radius:3px;
text-align: center;
margin: auto;
background:gray;
display:table; /* make this act as a table */
}
main{
text-align: left;
overflow-x: hidden;
background: red;
padding:2em;
display:table-cell; /* make this act as a table cell */
}
aside{
/*float: left; */
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
min-width: 340px;
padding: 20px;
padding-left: 0;
/* height: 100%; */
text-align: left;
background:orange;
display:table-cell; /* make this act as a table cell */
}
http://jsfiddle.net/2m503b8e/3/
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
Is there any alternative to vertical-align?
For using vertical align I am having to set the display to table-cell. When I have the display set to table-cell the height of the div that I have set does not work. I have overflow-y set to auto on that div. What I am trying to do is align the content inside the div from the bottom of that div... I am not able to do that.. Any alternatives?
This is what I have right now:
#container{
height:375px;
border:1px solid #000;
position:relative;
overflow-y:auto;
display:table-cell;
vertical-align:bottom;
}
#container > div{
margin:0;
margin-bottom:5px;
width:660px;
position:relative;
}
There are 2 alternatives, one is to set line-height.. and other one is to set the parent element to position: relative; and than set your child element to position: absolute; and later, use top: 50%; and left: 50%; and than deduct the margins which will be 1/2 of the total height and width of the absolute element itself...
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Assuming height of the element is 200 */
margin-left: -200px; /* Assuming width of the element is 400 */
}
Here's a catch though, using absolute will require fixed dimensions of the element you are trying to align vertically center
Vertical Aligning an element using display: table-cell;
Demo
.parent {
height: 200px;
background: #eee;
display: table-cell;
width: 300px;
vertical-align: bottom;
}
.child {
height: 20px;
background: #aaa;
}
Also it would be better if you use display: table; as a wrapping element.
try this:
#container{
height:375px;
line-height:375px;
}
#container > div{
display:inline-block;
line-height:1;
}
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}
I have a container div with a floating left-hand navigation pane and a content pane to the right:
<div id="header"></div>
<div id="container">
<div id="leftnav"></div>
<div id="content"></div>
<div class="clearfix"></div>
</div>
<div id="footer"></div>
CSS:
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
margin-left: 200px;
background-color: green; /* so I can see it */
}
.clearfix { clear: both; }
The #container div stretches to the full height of the floating #leftnav div, but the contained #content div does not stretch to 100% of the height. I've read elsewhere that this is due to the parent #container not having a specified height (defaults to auto) and therefore the 100% is not based on that container; however, I can't specify the height because the left navigation pane height isn't constant.
How can I get the #content div to be 100% of the height of the #container div when the #container div's height is defined by the floating #leftnav?
This is similar to the 3 column liquid "holy grail" CSS layout that has been plaguing people for years (though has been solved in the past couple years, though many of the solutions required browser hacks or Javascript to function).
I'd highly suggest you not reinvent the wheel here as it is difficult to get CSS to perform exactly as you're describing. Here is a good resource for this layout and many other similar liquid layouts:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
The easy way would be to use JS to set the height of #content to the height of #leftnav. You can use faux columns on #container and make a slice/gif of the green background and repeat it vertically on #container along with the red however you have it but I'm not sure if it fits your needs.
try this CSS
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
background-color: green; /* so I can see it */
float:right;
}
.clearfix { clear: both; }
I would also suggest using a line break with a clear both rather than a div.