How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
Related
I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container
text-align: center; height: calc(100% - header - footer ))
but when the user is changing size
for the window the footer is also change his position but should not do it
Js fiddle
https://jsfiddle.net/hm97o1sa/
is there any way to fix it without "flex" ?
updated:
expected behavior
scrolled to the top
scrolled to the bottom
A possible solution would be to use calc together with Viewport units vh.
With calc(), you can perform calculations to determine CSS property values.
With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (vh).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100vh - 150px);
min-height: 250px;
text-align: center;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
Modify your CSS and your Final code will be:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100% - 150px);
text-align: center;
overflow-y: auto;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>TA</title>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
A quick fix is to apply a min-height: 250px on your #content
#content {
height: calc(100% - 150px);
min-height: 250px;
text-align: center;
}
I have two divs that I want to float on the same line. I don't want the right one to wrap until the window gets around 250px wide.
I am setting the initial widths of the divs to percentages and this seems to be causing issues. The right div will wrap to a new line well before it shrinks to a min-width of 100px;
<div id="#container">
<div id="left">
<div id="box"></div>
</div>
<div id="right">
<h1>Hello World</h1>
</div>
</div>
#container {
display: table;
width: 100%;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
float: left;
width: 23.6%;
min-width:150px;
background: gold;
text-align: center;
}
#right {
float: left;
width: 76.4%;
min-width:100px;
background: pink;
}
http://jsfiddle.net/5C6GB/
Removing the width on the right div partially solved the problem.
But it looks like I had to resort to using display:table*
http://jsfiddle.net/5C6GB/3/
<div id="container">
<div class="tr">
<div id="left" class="td">
<div id="box"></div>
</div>
<div id="right" class="td">
<!-- <h1>Hello World</h1> -->
</div>
</div>
</div>
#container {
display: table;
width: 100%;
background: red;
height: 100px;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
width: 25%;
min-width:150px;
background: gold;
text-align: center;
height: 100%;
}
#right {
min-width:100px;
background: pink;
width: 75%;
vertical-align: bottom;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
#media only screen and (max-width: 600px) {
#left, #right {
display:block;
width: 100%;
min-height: 100px;
}
.tr {
display: block;
}
#container {
display: block;
}
}
It's the min-width:150px; in the left div which is causing the right div to wrap to a new line well before it shrinks to a min-width of 100px;
#left {
float: left;
width: 23.6%;
min-width:150px; /*remove or change this to a smaller amount */
background: gold;
text-align: center;
}
FIDDLE
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
My navbar (940px for instance) contains 3 divs :
One aligned left (automatic sizing) containing a menu
One aligned right (defined size, 100px for instance) containing a logo
One (automatic sizing) containing an input[type="text"] that should stick to left and right divs
Each div will have a different background/opacity, there must not have overlapping between them.
He is a drawing about what I need :
+------------------+-------------------------------------------+-----------------+
| MENU | INPUT TYPE TEXT (width: 100%) | LOGO |
+------------------+-------------------------------------------+-----------------+
Do you have an idea on how to do that? Thanks in advance.
Don't float the center <div>. If you move it below the floating elements, it will sit between the floated elements. Adding overflow: hidden to the middle element prevents it from flowing beneath the floated elements.
HTML from your example:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
and the CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 500px;
background: blue;
overflow: hidden;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
check this fiddle I made 3 div's and 1 container. hope it helps.
body
{
margin: 0px;
padding: 0px;
}
.container
{
width: 100%;
height: 200px;
}
.left
{
width: 50px;
height: 200px;
background: green;
float: left;
}
.center
{
width: 68%;
height: 200px;
background: blue;
float: left;
}
.right
{
width: 50px;
height: 200px;
background: yellow;
float: left;
}
Rearrange your HTML so the elements are in this order:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
Then use this CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 100px;
background: blue;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
jsFiddle example
Move the item you want on the right to the first position in the HTML:
<div class="wrap">
<div class="r">Logo</div>
<div class="l">Menu</div>
<div class="c">Center content</div>
</div>
Then it's simply CSS:
.wrap { background: #ddd; margin: 10px; }
.wrap > div { padding: 10px;}
.r { float: right; background: #aaa; width: 100px; }
.l { float: left; background: #eee; width: 100px; }
.c { text-align: center; }
DEMO HERE
I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.