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%
Related
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%};
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target ÷ context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
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.
This is difficult for me to ask.
In short: my div overlaps (gets outside the table). I want the table to be sized according to the div.
When I'm trying to add a footer, the content overlaps it. Here is the code:
Here is the page: page
the .middle css class sets the height of the center content to 25px The footer is therefore positioned related to the menu table content on the left.
If you remove the 25px from the css class the div should work as you expect
Ok I will suggest you rewrite your site because it's total mess, use my template for starters:
<div class="wrap">
<div class="header"></div>
<div class="body">
<div class="left-side"></div>
<div class="center"></div>
<div class="right-side"></div>
</div>
<div class="footer"></div>
</div>
And css:
.wrap{
width: 400px;
height: 500px;
margin: 0 auto;
}
.header{
width: 100%;
height: 50px;
background-color: #dddddd;
}
.body{
width: 100%;
height: 350px;
}
.left-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.center{
position: relative;
float: left;
width: 60%;
height: 100%;
background-color: #cccccc;
}
.right-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.footer{
width: 100%;
height: 100px;
background-color: #dddddd;
}
Here is live example in jsFiddle
well, #Arturas.. I kinda agree with #skmasq for your website. I think it'll be better if you're not using table for the layout. but, if still want to use your current website source code, try to delete the .middle's height property. because you set it fixed 25px, but the content is overload, that's why it's overlapping.