body {
background-color: blueviolet;
}
.leftcolumn {
width: 30%;
height: 100%;
float: left;
background-color: brown;
}
.middlecolumn {
float: left;
background-color: yellowgreen;
width: 60%;
height: 100%;
}
<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>
I am trying to make three columns next to each other whilst being 100% in height.
I think the problem is that I used 'float: left;', but I wouldn't know what I should've needed to use.
Since both left and middle columns are div, it will be by default display: block, you need to override it to display: inline-block to adjust in the same row.
Other than that the columns are taking 100% height, I have tried giving 100vh to the body, so it is working as expected.
body {
background-color: blueviolet;
height: 100vh;
}
.leftcolumn, .middlecolumn {
height: 100%;
display: inline-block;
}
.leftcolumn {
width: 30%;
background-color: brown;
}
.middlecolumn {
background-color: yellowgreen;
width: 60%;
}
<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>
The reason the columns are not the full height is because you are using height: 100% on the columns
This inherits the full height of the parent element which is the body in this case, to simply fix this, add a height to your body like so:
body {
background-color: blueviolet;
height: 100vh;
margin: 0;
}
The Margin: 0 is there to not make the page overflow
This is because you have to add height to html, body.
can u please use this code in css, it will work.
body,html{height:100%};
Related
I have this html code:
<div id="home-page"> hello from home</div>
<div class="home-page top-div">
some text
</div>
<div class="home-page bottom-div">
other text
</div>
This is the css:
#home-page {
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
}
What I want to get is a page split in two parts horizontally, the top part in one colour and the second one in another colour. I tried this but it has no effect on my page.
Does anybody know what I did wrong? Thanks
I think you should define #home2-page also as
#home2-page{
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
}
Using percent in height is dependent on parent div height. If no height is set in the parent div, then height has no meaning.
The same is true for the parent. If you use a percent-height (or no height depending on HTMLElement.style.display) in the parent element, then it's parent needs to have a fixed height. All the way up to the html-element, which you can set to 100% height (and then it should work). html{ height: 100% }
Anyway, that is a silly way to do things, so I suggest you use something slightly more modern instead; The vh vw units (viewport height, viewport width). One vh unit is 1% of the viewport height. Thus, you can replace 50% with 50vh and it'll be something closer to what you wish for.
.top-div {
height: 50vh;
}
Try This:
html,body {
height: 100%;
}
html,body {
height: 100%;
}
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="home2-page"> hello from home</div>
<div class="home2-page top-div">
some text
</div>
<div class="home2-page bottom-div">
other text
</div>
Like #C Travel said, you can't use nested CSS meaning you can't put a class inside a class. You can accomplish your goal by simplifying your code a bit. Checkout my working example below:
CSS:
<style>
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
</style>
HTML:
<div class="top-div">
<p>hello from home</p>
<p>some text</p>
</div>
<div class="bottom-div">
<p>other text</p>
</div>
I'm trying to accomplish a 3 column fluid layout with an additional span at the bottom that covers the last 2 columns. In addition, I need to use source ordering so that the middle column is actually the first column in the markup.
I have an example fiddle working in chrome/safari/firefox here: http://jsfiddle.net/66krg9cr/6/
<div class="container">
<div class="middle">
<div style="height: 400px;"></div>
</div>
<div class="left">
<div style="height: 600px;"></div>
</div>
<div class="right">
<div style="height: 200px;"></div>
</div>
<div class="bottom"></div>
</div>
* {
box-sizing: border-box;
}
.container {
max-width: 90%;
margin: auto;
overflow: hidden;
}
.middle {
width: 48.59114%;
float: left;
margin-left: 25.70443%; // push toward the middle
margin-right: 2.81771%;
background: #000;
}
.left {
background: #333;
margin-left: -77.11328%; // pull towards the left
width: 22.88672%;
float: left;
}
.right {
background: #666;
width: 22.88672%;
float: right;
height: 200px;
margin-bottom: -9999px; // equal height column trick
padding-bottom: 9999px;
}
.bottom {
background: #999;
width: 77.11328%; // width of the last two columns combined
float: right;
height: 200px;
}
Unfortunately, I can't get this working correctly with IE9. In that browser, the bottom 2 column span drops below the bottom of the first column instead of being beside it. It seems the problem is the source ordering. If I change the order in the HTML to match the visual layout, then IE behaves. It's like IE remembers the height of the first column before it's moved left, and lays out the bottom span according to that height.
I would move the HTML around and just solve the problem, but it's going through a rigorous accessibility/screen reader review, and i know I would get dinged for not having the main content at the top of the source code.
Also, content in these divs will be dynamic in production, so I can't rely on knowing the height of any one column.
Any help would be greatly appreciated.
Why not stray away from negative margins and break the whole thing up into wrappers like this:
HTML:
<div class="container">
<div class="container-main">
<div class="top">
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</div>
<div class="container-left">
<div class="left"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.container-main {
position: relative;
float: right;
width: 77%;
margin: 0;
min-height: 100%;
}
.container-left {
position: relative;
float: left;
width: 23%;
margin: 0;
min-height: 100%;
}
.container-main .top {
width: 100%;
min-height: 400px;
}
.container-main .top > div:first-child {
width: 70%;
float: left;
background: #000;
height: 400px;
}
.container-main .top > div:last-child {
background: #666;
width: 30%;
float: right;
height: 400px;
}
.container-main .bottom {
background: #999;
width: 100%;
height: 200px;
}
.container-left .left {
background: #333;
width: 100%;
height: 600px;
}
Your main content is still at the top. If you don't have to have everything in one wrapper then this may work, I can't test it in older IE versions though, but you can give it a try and let me know!
Here is a Fiddle of the above in action: http://jsfiddle.net/egxfnjzL/
...and just for fun, here is an exact copy of what you had: http://jsfiddle.net/whkqnnyg/
I've created a jsfiddle: http://jsfiddle.net/cMqTd/1/
I have three divs. A parent, a header, and a content. The header's height is unkown, and the content div should fill the remainder space.
I tried height: 100% but it isn't what I expected.
Try floating the header:
#head {
background: green;
float: left;
width: 100%;
}
Floating the header works fine (don't know why the downvotes on Bryce's answer).
HTML:
<div id="parent">
<div id="head">head<br />head<br />head<br /></div>
<div id="content">content</div>
</div>
CSS:
html, body {
margin: 0px;
height: 100%;
}
#parent {
background: red;
height: 100%;
}
#head {
background: green;
width: 100%;
float: left;
}
#content {
background: yellow;
min-height: 100%;
}
And the working JSFiddle.
[EDIT]
Changed the height of #content to min-height.
My HTML has 2 divs inside an outer div:
<div class="outer">
<div class="col-left">
<p>Lorem Ipsum is simply dummy text of the...
</div>
<div class="col-right">Right</div>
<div class="clear"></div>
</div>
The CSS is:
.outer {
border: 1px solid black;
}
.col-left {
float: left;
background: cyan;
width: 80%
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.
How can I use height 100% without specifying in its parent a fixed height?
I'm going to use what Layne wrote in the comments.
This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day.
html, body {
height: 100%;
}
.outer {
border: 1px solid black;
/* I use this instead of the micro clear-fix in this case - look that up */
overflow: hidden;
height: 100%;
}
.col-left {
float: left;
background: cyan;
width: 80%;
min-height: 100%;
}
.col-right {
float: left;
width: 20%;
background: yellow;
height: 100%;
}
http://jsfiddle.net/sheriffderek/fdxGZ/
This is also an issue with "sticky" footers and stuff:
Always a battle http://codepen.io/sheriffderek/pen/ziGbE
I hope that helps!
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
use jquery
$(document).ready(function(){
var outerheight = $('.outer').height();
$('.col-right').height(outerheight);
});
I'm trying to build a liquid layout with two columns and a fixed footer at the bottom. I already take some help here, and I have one example above.
http://jsfiddle.net/kpDDM/18/
The problem on my example is that it has a fixed height. When I move to 100% heigh on my content div, the content collaps.
Do you need something like this : http://jsfiddle.net/kpDDM/44/
HTML
<div class="all">
<div class="content">
<div class="left"> </div>
<div class="right"> </div>
</div>
<div class="footer"></div>
</div>
CSS
.all {
position: relative;
height: 100%;
width: 100%;
}
body,html{
height:100%;
}
.content {
display:inline-block;
height: 90%;
width: 100%;
}
.left {
display: inline-block;
float: left;
width: 60%;
height: 100%;
background-color: red;
}
.right {
display:inline-block;
float: left;
width: 40%;
height: 100%;
background-color: blue;
}
.footer {
display: inline-block;
width: 100%;
height: 10%;
background-color: green;
}
Explanation
The problem is that the body tag does not have 100% itself. You have to assign that to body and then it'll work. In the above example I assumed that the content + footer share 100% of the height. 90% + 10%