I have this html:
<div id="wrapper">
<div id="left">left<br/>asdfa</div>
<div id="right">right</div>
<div style="clear:both"></div>
</div>
and the css:
#wrapper {
width: 400px;
background-color:green;
display:table;
}
#left {
display:table-cell;
float:left;
width:100px;
background: blue;
}
#right {
height:auto;
width:100px;
background: red;
float:right;
}
How to make the right div to fit the height of the wrapper div ??
there are 2 ways to do it:
1) set equal height for all 3 DIVs examle:
#wrapper {
width: 400px;
background-color:green;
display:table;
height:50px;
}
#left {
display:table-cell;
float:left;
width:100px;
background: blue;
height:50px;
}
#right {
width:100px;
background: red;
float:right;
height:50px;
}
Demo: fiddle
2)
add :
#right {
height:100%;
overflow:auto;
}
Demo: fiddle
Fiddle
#right {
text-align: right;
display:table-cell;
height:100%;
width:100px;
background: red;
position: relative;
}
you could try this out, tell me if it worked or not.
style.css
#right {
position: relative;
height: 100%;
width: 100px;
background: red;
float: right;
}
Using jQuery might be a bit overkill if the CSS fixes above work for you, but the guys at Zurb showcased a pretty neat way of equalling out the height of divs:
https://github.com/zurb/foundation/issues/1358
Here's some example HTML of a grid snippet and a block-grid snippet.
You'll notice a few data attributes, data-match-height and
data-height-watch. These are used to scope the parent of the elements
you want as the same height and to mark the children that will look to
match heights.
<div class="row" data-match-height>
<div data-height-watch class="small-3 columns" style="background: pink;">
<p>Some text...</p>
</div>
<div data-height-watch class="small-6 columns" style="background: orange;">
<p>Some text...</p>
<img src="http://placehold.it/300x300">
</div>
<div data-height-watch class="small-3 columns" style="background: lightblue;">
<p>Some text...</p>
</div>
</div>
From here, I created a some JS that will do the magic:
$("[data-match-height]").each(function() {
var parentRow = $(this),
childrenCols = $(this).find("[data-height-watch]"),
childHeights = childrenCols.map(function(){ return $(this).height(); }).get(),
tallestChild = Math.max.apply(Math, childHeights);
childrenCols.css('min-height', tallestChild);
});
You can include this JS in app.js under the JS links at the bottom of your pages.
HTML
<div id="left">left<br/>asdfa</div>
<div id="right">right</div>
<div style="clear:both"></div>
</div>
CSS
#wrapper {
width: 400px;
background-color: green;
display: table;
}
#left {
display: table-cell;
float: left;
width: 100px;
background: blue;
}
#right {
background-color: red;
display: table-cell;
padding-top: 5px;
width: 50%;
}
Fiddle
This many updates are not required.
Only put display:table-cell in #right css. that's it. It will solve your problem.
new answare using javascript
FIDDLE:http://jsfiddle.net/62DQ8/62/
ADD this in the <head>HERE</head>
<script language="JavaScript" type="text/javascript">
var h = document.getElementById("wrapper").offsetHeight;
document.getElementById("right").style.height = h + "px";
</script>
use this equal height jquery
setHeight($('.wrapper > div'));
function setHeight(col) {
var $col = $(col);
var $maxHeight = 0;
$col.each(function () {
var $thisHeight = $(this).outerHeight();
if ($thisHeight > $maxHeight) {
$maxHeight = $thisHeight;
}
});
$col.height($maxHeight);
}
Related
I have 3 DIVs: 1. suiteBar, 2. ribbonMain, 3. ribbonSub
I like to display the DIVs in the following way:
DIV1 (suiteBar) : right (without a specific width)
DIV2 (ribbonMain) : left in the same line with DIV1 (width: 100%)
DIV3 (ribbonSub) : under DIV1+DIV2 over the full width from both DIVs
Is that possible? Everytime when I give my DIV2 a width from 100% it makes a 'line Break'... See my example on fiddle and code here:
http://jsfiddle.net/dkHZS/
#topHeader {
display: block;
}
#suiteBar {
background-color: Aqua;
float: right;
display: inline;
}
#ribbon {
background-color: Lime;
float: left;
display: inline;
width: 100%;
}
#ribbonSub {
background-color: Gray;
}
<div id="topHeader">
<div id="suiteBar">suiteBar</div>
<div id="ribbon">ribbonMain
<div id="ribbonSub">ribbonSub</div>
</div>
</div>
Don't float the ribbon div:
#suiteBar {
background-color: Aqua;
float: right;
}
#ribbon {
background-color: Lime;
}
http://jsfiddle.net/dkHZS/4/
Also, when you float an element, it becomes a block element, so setting it to inline won't matter.
Use overflow:hidden on the right div: http://jsfiddle.net/dkHZS/6/
You could do something like this:
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
CSS:
#left{
float:left;
width: 90%;
background: green;
height:20px;
}
#right{
overflow:hidden;
background: blue;
height:20px;
}
#bottom{
width: 100%;
float:left;
background: red;
height:20px;
}
Check this fiddle.
I use position.
This method also works good.
http://jsfiddle.net/hassaan39/NbX7P/
Given the following
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
(See: http://jsfiddle.net/ericjohannsen/JCPEH/1/)
Why does container apparently not have any area (that is, it has a zero height, plus the border)? I naively expected it to be as tall as the child divs that it contains.
What is the proper way to set this up so that the div containing the two children is as tall as the children?
You need to clear your floats. You can do this via a clearfix class:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
or a clearing element:
.clear {
clear:both;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
Updated Fiddle:
http://jsfiddle.net/JCPEH/5/
This is because floats are not part of the layout until they are cleared.
A float like some other "commands" (like position relative/absolute/fix) removes the element from the normal rendering flow.
One result, it is no longer affecting it's parent element way of rendering.
You can enlighten yourself here
before closing the big div add a <div id="clear"></div> and in css add #clear{clear:both;}
Set the position to absolute for the container, that fixes the problem. http://jsbin.com/ifojug/1/ jsfiddle doesnt work on my browser for some reason
I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!
Code
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
</div>
...
html, body {height: 100%}
.table {
display: table;
height: 100%;
}
.innerLeft {
display: table-cell;
min-width: 160px;
background-color: lightblue;
color: black;
}
.innerRight {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.
If you want to make your colums fill the whole screen you could use something like
.innerLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
.innerRight {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
}
Note that this is css3 and wont work for old browsers.
css3
<style>
html, body{height:100%;padding:0;margin:0;}
div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
div.table{width:100%;height:100%;}
div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>
html:
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
Page:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
div.table, div.table * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.table {
width:100%;
height:100%;
}
div.table div {
border:1px solid black;
width:50%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="table">
<div class="innerLeft"> <span>Left Column</span>
</div>
<div class="innerRight"> <span>Content with Iframe</span>
</div>
</div>
</body>
</html>
The above code would create two columns whenever you would like to fill the whole screen or a section.
The following code could be used to only fill the whole screen (containers behaves odd when using position absolute, there is workarounds though):
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
#left {
width:50%;
height:100%;
position:absolute;
top:0;
left:0;
background:red;
}
#right {
width:50%;
height:100%;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
Shortest answear is to use proper table, min-height can also help you, but not all browsers respect it.
Does this work for what your wanting?:
http://jsfiddle.net/Sgfnm/
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</div>
</div>
.table {
display: block;
}
.innerLeft {
display: block;
width: 160px;
background-color: lightblue;
color: black;
float:left;
}
.innerRight {
display: block;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
I want to make my inner div 100% width of the body, not 100% of the parent div. Is this possible?
The layout looks like this:
<body>
<div> /** Width:900px; **/
<div> /** This I want 100% of BODY, not of parent div **/
</div>
</div>
</body>
i hope you are looking like this........... see the DEMO
UPDATED DEMO 2 AS PER YOUR CURRENT REQUIREMENTS
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
position:absolute;
left:0;
right:0;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
-------------**
Second Answer with without positioning but with a some trick what i used here so please check it the code & demo mentioned below :-
HTML
<body>
<div class="parent"> /** Width:900px; **/
<div class="child"></div>
</div>
<div class="inner"> /** This I want 100% of BODY, not of parent div **/</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
DEMO
you can use vh an vw units
.parent {
width: 900px;
height: 400px;
background-color: red;
}
.child {
width: 100vw;
height: 200px;
background-color: blue;
}
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
try this:
.inner {
margin-left: -50vw;
left: 50%;
position: fixed;
height: 100vw;
width: 100vw;
top: 0;
}
.outer {
width: 900px;
/* your outer div style*/
}
<body>
<div class="outer"> /** Width:900px; **/
<div class="inner"> /** This 100% of BODY, not of parent div **/
</div>
</div>
</body>
Consider changing your layoiut to something like the following:
http://jsfiddle.net/KpTHz/
Then you can just apply ID tags to DIVs you want to apply specific rules to.
<div class="outer">
<div class="inner">HEADER</div>
</div>
<div class="outer">
<div class="inner">CONTENT</div>
</div>
<div class="outer">
<div class="inner">FOOTER</div>
</div>
.outer {
width:100%;
background:#ccc;
}
.inner {
width:920px;
background:#999;
margin:0 auto 20px;
padding:20px;
}
I think what you are asking for isn't possible. Instead you should consider rethinking your layout. I often find myself doing stuff like this:
html:
<div id="top">
<div class="wrapper"></div>
</div>
<div id="content">
<div class="wrapper"></div>
</div>
<div id="footer">
<div class="wrapper"></div>
</div>
css:
#top {
background: red;
}
#content {
background: orange;
}
#footer {
background: yellow;
}
.wrapper {
width: 860px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
}
demo - http://jsfiddle.net/bxGH2/
This made the trick. A jQuery script:
$(document).ready(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
$(window).resize(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
Overriding the min-width ( min-width:100% ) stopped the container from growing to the size of the contents.
Details:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset informs:
"Unlike almost any other element, the WHATWG HTML Rendering spec suggests
min-width: min-content
as part of the default style for , and many browsers implement such styling (or something that approximates it)."
I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.
A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.
Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/
try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>