I have a problem, and I want to make #left be the same height as #right, I have set height: 100%; but it only works if there is content.
the HTML & CSS code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: #cfcfcf;
margin: 0;
}
#wrapper {
width: 900px;
height: 100%;
background: white;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#left
{
width: 200px;
min-height: 100%px;
background: blue;
overflow: hidden;
height: 100%;
float: left;
}
#leftbottom
{
width: 200px;
height: 30px;
background: red;
float: left;
}
#right
{
width: 800px;
background: cyan;
height: 100%;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<div id="leftbottom"></div>
</div>
<div id="right">
<h1>Content ipsum</h1>
<h2>Lorem ipsum</h2>
<h2>Lorem ipsum</h2>
<h2><- White space</h2>
</div>
</div>
</body>
</html>
I've also tested with position: absolute but it does not work either, how can I solve this?
also, I do not need to establish fixed height
If you put %, the words that can use the 100 of its size, not that it is of such size, if you want to assign size, use px
#left
{
width: 200px;
/*min-height: 100%px;*/ % before px? really?
background: blue;
overflow: hidden;
height: 100px;
float: left;
}
#right
{
width: 800px;
background: cyan;
height: 100px;
float: right;
}
body {
background-color: #cfcfcf;
margin: 0;
}
#wrapper {
width: 1000px;
height: 300px;
background: white;
}
#left
{
width: 200px;
background: blue;
float: left;
height: 100%;
}
#right
{
width: 800px;
background: cyan;
height: 100%;
float: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<div id="leftbottom"></div>
</div>
<div id="right">
<h1>Content ipsum</h1>
<h2>Lorem ipsum</h2>
<h2>Lorem ipsum</h2>
<h2>White space</h2>
</div>
</div>
</body>
</html>
Well the solution is not big for it. You need to use bootstrap column with equal height.
<div class="row row-eq-height">
<div class="col-6">Hello</div>
<div class="col-6">World</div>
</div>
Know more read this
http://getbootstrap.com.vn/examples/equal-height-columns/
Related
Can someone tell me why I'm able to style the header class but not my MainContent class? Only the Lorum Ipsum text shows up. The maincontent div doesn't show any width, height or color. Thanks for any help!
.header {
width: 100%;
height: 90px;
background-color: blue;
}
.header img {
height: 80%;
margin-top: 10px;
margin-left: 260px;
}
.MainContent {
width: 100%;
height: 80%;
background-color: yellow;
}
<div class="header">
<img src="img/epic_it.png" alt="epicit logo">
<nav></nav>
</div>
<div class="MainContent">
<h1>
Lorem ipsum
</h1>
</div>
You have a really strange piece of markup at the end of your .header img declaration, which is being considered a CodeMirror invalid character, and causing any CSS that follows it to break. If you edit your snippet, you'll see a red circle there, though it is invisible in the snippet preview.
Simply removing that fixes the problem:
.header {
width: 100%;
height: 90px;
background-color: blue;
}
.header img {
height: 80%;
margin-top: 10px;
margin-left: 260px;
}
.MainContent {
width: 100%;
height: 80%;
background-color: yellow;
}
<div class="header">
<img src="img/epic_it.png" alt="epicit logo">
</div>
<div class="MainContent">
<h1>
Lorem ipsum
</h1>
</div>
Hope this helps! :)
I want to convert my web page into four section, one horizontal and three vertical. The horizontal section is okay, but there are two issues with vertical sections:
They are not filling the complete screen height.
The third section is overlapping with second section by nearly 10 or 20 pixels.
Here is my CSS:
body{
width: available;
height: available;
}
.container{
width: available;
height: available;
}
.leftpane{
width: 25%;
min-width: 350px;
height: available;
min-height: 400px;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane{
width: 50%;
min-width: 800px;
height: available;
min-height: 650px;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane{
width: available;
height: available;
position: relative;
margin-left: 75%;
background-color: yellow;
border-collapse: collapse;
}
.toppane{
width: available;
height: 100px;
border-collapse: collapse;
background-color: #4da6ff;
}
And this is the HTML page:
<div class="container">
<div class="toppane">Test Page</div>
<div class="leftpane"><h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane"><h1>Test Page</h1></div>
</div>
My output is this:
And I want it to be like this:
Here is a jsfiddle.
First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 25%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 50%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 25%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
.toppane {
width: 100%;
height: 100px;
border-collapse: collapse;
background-color: #4da6ff;
}
<div class="container">
<div class="toppane">Test Page</div>
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>
Note:
1. I removed all min-width and min-height you don't need these in this case.
2. use height: 100% for your elements also you should set this on body and html tags.
3. left pane should be float: left with width: 25%, right pane float: right width: 25% and middle pane float: left or float: right with width: 50%
that's all!
2022 Update!
Here is updated version via flex:
.container {
width: 100%;
height: 100vh;
}
.toppane {
width: 100%;
height: 100px;
background-color: #4da6ff;
}
.leftpane {
width: 25%;
height: 100vh;
background-color: rosybrown;
}
.middlepane {
width: 50%;
height: 100vh;
background-color: royalblue;
}
.rightpane {
width: 25%;
height: 100vh;
background-color: yellow;
}
body {
margin: 0!important;
}
.d-flex {
display: flex;
}
<div class="container">
<div class="toppane">Test Page</div>
<div class="d-flex">
<div class="leftpane">
<h1>Test Page</h1>
</div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1>
</div>
</div>
</div>
Check here. You'll get the simplest code to divide your screen into three columns.
HTML File
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>Hi</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Aditya</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>This is Working!</p>
</div>
</body>
CSS File
body {
width: 100%;
float: left;
}
.class1,
.class2,
.class3 {
width: 33.33%;
float: left;
height: 100px;
}
p {
padding-top: 25px;
text-align: center;
}
Use the Twitter Bootstrap framework which has a grid system.
EXAMPLE
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center bg-primary" style="height:40px;">Top </div>
</div>
<div class="row">
<div class="col-xs-3 bg-warning" style="height:200px;">left</div>
<div class="col-xs-6 bg-info" style="height:200px;">Center</div>
<div class="col-xs-3 bg-danger" style="height:200px;">Right </div>
</div>
</div>
</body>
</html>
<html> <head> <title>Divide Tab </title> <style> body, html {
width: 100%; height: 100%; margin: 0; }
.container { width: 100%; height: 100%; } .leftpane {
width: 25%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
text-align: center; }
.middlepane {
width: 50%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
text-align: center; }
.rightpane { width: 25%; height: 100%; position: relative;
float: right; background-color: yellow; border-collapse:
collapse; text-align: center; }
.toppane { width: 100%; height: 100px; border-collapse:
collapse; background-color: #4da6ff; text-align: center; }
</style>
</head> <body> <div class="container"> <div
class="toppane"><h2>Top View</h2></div> <div class="leftpane">
<h1>Left View</h1></div> <div class="middlepane"><h2>Middle View</h2></div> <div class="rightpane">
<h1>Right View</h1></div> </div> </body> </html>
I have a website with the following structure:
<html>
<body>
<div id="page">
<div id="anyContent"></div>
<div id="pagecontent">
<div id="bigContent"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
bigContent is dynamic and often stretches to large sizes (demonstrated by its width and height). Because a lot of elements are dynamically rendered into the div, bigContent isn't set to a static width.
How can I force the footer to have the same width as bigContent?
See my example jsFiddle.
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#page {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
height: 3000px;
width: 5000px;
}
#footer {
background: blue;
clear: left;
bottom: 0px;
width: 100%;
height: 100px;
}
You can set some properties to #pagecontent then it will work as per your need:
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#pagecontent {
float: left;
position: relative;
}
#pagecontainer {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
}
#footer {
background: blue;
height: 25px;
width: 100%;
}
<div id="pagecontainer">
<div id="anyContent"> </div>
<div id="pagecontent">
<div id="bigContent" style="width:500px; height:150px;"></div>
<div id="footer"></div>
</div>
</div>
You have set the width: 5000px and height to 3000px.
<div id="bigContent" style="width:5000px; height:3000px;"></div>
Try this
<div id="bigContent"></div>
and add
#bigContent {
background: yellow;
height: 1000px;
width: 100%;
}
FIDDLE
You set width to #bigContent, better would be to set this width to #pagecontent.
<div id="pagecontainer">
<div id="anyContent"></div>
<div id="pagecontent" style="width:5000px;">
<div id="bigContent" style="height:3000px;"></div>
<div id="footer"></div>
</div>
</div>
http://jsfiddle.net/47hb3fcn/3/
I am encountering some problems with div.images when trying to set {height: 100%; }: computed height does not equal the parent div#placeholder's height, but the grandparent div#home-screen's.
<!DOCTYPE html>
<html>
<body>
<div id="page-wrapper">
<div id="home-screen">
<header>
<div></div>
</header>
<div id="placeholder">
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
</div>
<div id="cross-screen-content">
<div></div>
</div>
</div>
<main role="main">
<p>This is a test page. </p>
</main>
<footer>
<div></div>
</footer>
</div>
</body>
</html>
Page style is as follows:
* {
margin: 0;
border: 0;
padding: 0; }
html, body {
height: 100%; }
div#page-wrapper {
height: 100%; }
div#home-screen {
display: table;
margin-bottom: 25px;
width: 100%;
height: 100%; }
header,
div#placeholder,
div#cross-screen-content {
display: table-row; }
header {
height: 85px;
background-color: #f00; }
div#placeholder {
height: 100%;
background-color: #0f0; }
div#placeholder div.images {
position: absolute;
left: 5%;
margin: 5px 0;
width: 90%;
height: 100%;
min-height: 200px;
background-color: #ccc; }
div#cross-screen-content {
height: 50px;
background-color: #00f; }
footer {
height: 80px; }
Also, {min-height: 200px; } doesn't seem to work.
Any ideas?
Thank you in advance.
UPDATE 1: min-height does work, but it does not prevent the parent DIV from collapsing.
I edited the following id's - is this the effect you were after?
div#placeholder {
height: 100%;
background-color: #0f0;
}
div#placeholder div.images {
left: 5%;
margin: 5px 0;
width: 90%;
height: 100%;
min-height: 200px;
background-color: #ccc;
}
The code should be rewritten as:
<div id="placeholder">
<div id="wrapper">
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
</div>
</div>
The div#wrapper needs the following styles:
div#wrapper {
display: table-cell;
position: relative; }
HTML
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
</div>
CSS
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.panel {
background-color: red;
}
Question:
How can I add another div that I can place under div.right? The div that I want to place under .right will be .under_right and the CSS is:
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
}
http://jsfiddle.net/daQ22/2/
Add:
clear:both;
float:right;
to under_right
Working DEMO
Add a div in html like this:
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">Blue</div>
<div class="new_div">New</div> <-- Added this new div here
</div>
and use this CSS:
.new_div { background-color: white; width:320px; float: right; }
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
<div class="underright"></div>
</div>
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
float: right;
}
As long as the div .underright is underneath div .right, the float will obey that structure.
Edit Just a quick note, perhaps adding display: block; to the css will help, especially if you change the size of the outer container.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
margin-top:30px;
background-color: gold;
}
.panel {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">
<div class="under_right">It is under right.</div>
</div>
</div>
</body>
</html>