I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaining space vertically in a window with a set minimum height.
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
body {
background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
width: 965px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 200px;
background: none;
padding-bottom: 10px;
} .content {
padding: 10px 0;
width: 380px;
height: 100%;
background: #fff;
float: left;
position: relative;
} .content2 {
float: left;
width: 380px;
height: 100%;
background: #fff;
padding: 10px 0;
}
-->
</style>
Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):
<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>
You need 100% height on the html tag as well
html { height: 100%; }
See: http://jsfiddle.net/wJ73v/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div {border: 1px solid #000; height: 100%; float: left;}
</style>
</head>
<body>
<div id="foo">a</div>
<div id="bar">b</div>
</body>
</html>
Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.
Related
I want to increase the overall size of the page. The current webpage looks too small for the screen size. please let me know how to make the homepage appear full on the screen like a normal website.enter image description here
this is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body{
width: 1920px;
height: 2476px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header{
width: 1920px;
height: 200px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header h1{
color: aliceblue;
text-align: center
}
}
</style>
</head>
<body>
<header> <h1>HEADER</h1> </header>
</body>
</html>
You've set the body and header width at 1920px.
html,
body {
height: 2476px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header {
height: 200px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header h1 {
color: aliceblue;
text-align: center
}
<header>
<h1>HEADER</h1>
</header>
Just put
'''
max-width:100%;
height:auto;
Instead of width: 1920px;
In the body.
And then put in the header
max-Width:100%
instead of width:1920px
I would like to reword this:
I would like to create a white background header with no hover (currently it is white), a full-width yellow box underneath which does not span the height of the screen, possibly expands when I add to it? A small white text box inside, and an image to the right-hand side of this.
So far I have:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a class="active" href="index.html">Home</a>
Wall
Shop
Blog
FAQ
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20">
</div>
</div>
<table><tr><td>
Hello
</td></tr></table>
</body>
CSS:
html, body {
height: 100%;
min-height: 100%;
border-width: 0;
border-style: solid;
border: #fff;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: left;}
.header {
overflow: hidden;
background-color: #ffffff;
padding: 20px 30px;
}
.header a {
float: left;
color: grey;
text-align: center;
background-color: #fff;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
background-color: #fff;
color: black;
}
.header a.active {
background-color: #fff;
color: #f4d442;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
background-color: #fff;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
My outcome ends up as a thin yellow box like so:
Problem
I am following this mockup I have made using Adobe XD and MDL components. Again, I am extremely out of practice and trying to understand a lot of new things.
MockUp
Does this help? Set the body height and whatnot to 100%. Then play with the inner height relative %s.
<html>
<head>
<style>
html, body { height: 100%; min-height: 100%; border-width: 5; border-style: solid; }
table { height: 100%; width: 100%; }
td { height: 100%; width: 100%; vertical-align: middle; text-align: center;}
</style>
</head>
<body>
<table><tr><td>
Hello
</td></tr></table>
</body>
</html>
Give this a shot....
.boxed {
width: 100vw;
height: 100vh;
box-align: center;
background-color: #f4d442;
padding: 25px;
margin: 0 auto;
The main problem is that your padding and margin are adding extra space around your yellow div. If you right click on your yellow div in the web page and select "Inspect", you'll be able to see the effects of those styles.
Next, if you want the yellow div to be full-screen, you'll need it to take up 100% of its parent container. The parent container must have a defined height, and the grandparent container must have a defined height, etc. all the way up to the highest level: the html tag. In the code snippet below, I've set the yellow div's parent containers' height to make the yellow div full-scren.
html,
body {
height: 100%;
margin: 0 !important;
}
.boxed {
background-color: #f4d442;
height: 100%;
width: 100%;
}
<html>
<body>
<div class="boxed">
</div>
</body>
</html>
Try this:
<div class="boxed">Lorem Epsum</div>
.boxed {width: 100%;box-align: center;background-color: #f4d442;padding: 25px;margin: 0;}
This is what I want to achieve (montaged pic):
The red outline is the container, with size calculated relative to the page/browser window. Then, I'd want two divs (green dashed), with width 15% of the container (and height 100% of it), to stick to the right of the container, taking as much space as they need - and finally, I'd like a left aligned div (blue dashed) with height 100% of container, to take up the rest of the remaining width.
Unfortunately, the closest I got to is this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
border: 2px dashed blue;
display: inline-block;
}
.gr {
width: 15%; height: 100%;
border: 2px dashed green;
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>
<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>
</body>
</html>
... which produces this (Firefox 43):
... which is not what I had in mind: the right divs try both to stick to the right edge of the container, and so they do not stand side-by-side, but on top of each-other instead...
Is there anything I could do to get the desired design (preferably in pre-CSS5, and without changing the HTML structure - and no JS)?
You can use Flexbox here, just use flex: 0 0 15% on .gr and flex: 1 on .lb
* {
box-sizing: border-box;
}
.cntr {
width: 60vh;
height: 15vh;
border: 2px solid red;
display: flex;
}
.lb {
border: 2px dashed blue;
flex: 1;
}
.gr {
flex: 0 0 15%;
border: 2px dashed green;
}
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright2" class="gr">B</div>
</div>
Update: Actually since you have fixed width of 15% on both .gr you can just use 70% on .lb with floats but you need to add box-sizing: border-box
* {
box-sizing: border-box;
}
.cntr {
width: 60vh;
height: 15vh;
border: 2px solid red;
}
.lb {
border: 2px dashed blue;
width: 70%;
height: 100%;
float: left;
}
.gr {
width: 15%;
height: 100%;
border: 2px dashed green;
float: left;
}
<div id="contain" class="cntr">
<div id="leftblue" class="lb">Left</div>
<div id="greenright1" class="gr">A</div>
<div id="greenright2" class="gr">B</div>
</div>
Your problem is due to the border. When adding a border you should consider adding twice the border width to your actual position or delete the borders
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
/*border: 2px dashed blue;*/ <--- NO BORDER
display: inline-block;
}
.gr {
width: 15%; height: 100%;
/*border: 2px dashed green;*/ <--- NO BORDER
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>
<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>
</body>
</html>
I want to have two div boxes one at left and another at right corner.
With the help off following code it comes but both are not in same align.
It comes one after another.
Here is my code
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left }
.demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body><div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
So it comes like
and I want it to look like
It's because of max-width: 300px; in you body. Removing that would do the trick.
demo and demo1 are having a min-width of 200px each, summing to 400px. But the body have a max-width of only 300px.
<head>
<style>
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4em;
}
h1 {
font-size: 1.8em;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: left
}
.demo1 {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: right
}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
Flex is becoming more and more common place and means you don't have to have your boxes so far apart
.demo-container {
display: flex;
align-items: center;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
}
.demo-button {
height: 25px;
margin: 20px;
}
<div class="demo-container">
<div id="frmt" class="demo"></div>
<button class="demo-button">>></button>
<div id="frmt1" class="demo"></div>
</div>
I know your question had already been answered, but there is always more than one way to solve a problem :-)
Try this
<body><div id="frmt" class="demo" style="float:left;"></div>
<div id="frmt1" class="demo1" style="float:right;"></div>
</body>
I am now embedded the style tag into my CSS and have also added max-height:90% as suggested but the div element is still overflowing into other elements. what am I doing wrong???
<head>
<style>
.atlas.region-map
{
border: 2px solid #716E64;
max-width: 500px;
overflow: hidden;
margin: 0;
float: left;
}
.atlas.map-content.info-col
{
margin-left: 549px;
width: 335px;
}
.atlas.map-content.info-col p
{
color: #5c5642;
margin-top: 15px;
font-size: 12px;
}
.Atlas_Test
{
height: 300px;
font-size: 14px;
overflow-y: scroll;
max-height: 90%;
}
</style>
</head>
<body>
<div class="info-col">
<p>Content to go here!!!</p>
</div>
</body>