I have a problem with getting the height of my vertical menubar the same as the rest of the page.
So I have it like this
<div id="header">Site title etc</div>
<div id="pagecontent">
<div id="menubar">Menu buttons<div>
<div id="pageinnercontent">Contents of the page</div>
</div>
With this CSS:
html {
min-height: 100%;
}
body {
min-height: 100%;
}
#pagecontent{
position: absolute;
width: 100%;
min-height: 100%;
}
#menubar{
height: 100%;
position: absolute;
width: 170px;
background-color: #404040;
color: white;
float: left;
bottom: 0;
}
#pageinnercontent{
width: calc(100% - 170px);
left: 170px;
position: absolute;
}
However, it is not working. When the contents of pageinnercontent is "longer" than the menu, the menu is not made longer. Please help.
Use flex and don't forget margin
Here is an example, it doesn't looks exactly well in stackoverflow context, but in standalone it's valid (with )
html {
margin:0;
height:100%;
width:100%;
}
body {
display:flex;
flex-direction:row;
height:100%;
width:100%;
}
.menu {
min-width:300px;
background-color:red;
border:solid 3px black;
min-height:100%;
}
.main {
background-color:yellow;
border:solid 3px blue;
min-height:100%;
flex:1;
}
<html>
<body>
<div class="menu">
Menu Is Here
</div>
<div class="main">
Main Is Here
</div>
</body>
</html>
For today - FLEX is the only modern layout CSS 3.0 facility to be used in Application-like layouting and for one-screen sites. Floats, grids and javascript on-resize hacks for now are old-school. Most browsers provides valid flex-*** support - Mozilla, Chrome, IE9(!), Opera - all for both PC and mobile versions.
About flexes U can see here (for start): http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just do Z-index of 2 for for the menu bar and 1 for content. That ensures that the menu bar will always be on top.
html {
height: 100%;
}
body {
height: 100%;
}
#pagecontent{
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1;
background-color: red;
}
#menubar{
height: 100%;
position: absolute;
width: 170px;
background-color: #404040;
color: white;
float: left;
top: 0;
bottom: 0;
z-index: 2;
}
#pageinnercontent{
width: calc(100% - 170px);
left: 170px;
position: absolute;
}
<div id="header">Site title etc</div>
<div id="pagecontent">
<div id="menubar">Menu buttons<div>
<div id="pageinnercontent">Contents of the page</div>
</div>
Note With the current structure and CSS ensures that the menu stretches to the bottom and a higher z-index number that all other elements ensures that it is always seen.
Related
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.
See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
I am having trouble generating a HTML/CSS layout. The best way to think of it is to take a normal horizontally centered page layout. Only I want one div to extend beyond the centered layout to the right edge of the browser window.
This should work fluently with browser window resizing.
Here are two CSS-only methods to achieve layouts like this. Both have been briefly tested in IE 7/8/9 and Chrome.
Example 1
Here's an example where you know the heights of all your elements.
Demo: http://jsfiddle.net/3RDuy/2/
HTML
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>
CSS
DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }
Example 2
Here's an example where you only know the height of the top and bottom.
Demo: http://jsfiddle.net/3RDuy/3/
HTML
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>
CSS
DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }
If you want variable heights on everything (including the ability to have a height greater than 100%) you will probably need to use JavaScript.
This was a very interesting challenge.
I needed a similar effect several months ago with an element extending out of the container to the window's edge, but did not need that space available for content - it was merely a design effect.
Tim's answer is solid, but needing to know the height of an element is not practical. My solution eliminates this requirement.
Making use of a wrapper, some padding and negative margins, we can manipulate our layout to replicate the desired functionality.
Markup:
<div class="header">
<h1>Hello World!</h1>
</div>
<div class="content">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet.</p>
</div>
CSS:
.header,
.footer {
clear: both;
margin: auto;
width: 600px; /* Your container width */
background: grey;
}
.content {
float: right;
width: 50%;
padding-left: 300px; /* Half of your container width */
}
.a {
float: left;
margin-left: -300px; /* Half of your container width */
width: 200px;
height: 10em; /* Not required, set for visual */
background: red;
}
.b {
margin-left: -100px; /* The difference between half your container width and element A */
height: 10em; /* Not required, set for visual */
background: yellow;
}
Demo: http://jsfiddle.net/rkW9J/
It should be noted that this hasn't been tested extensively cross-browser, but doesn't implement any obvious layout quirks so we should be good.
Can't find a solution width pure CSS, but here's how to do it with javascript / jquery.
Demo
HTML:
<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>
CSS:
#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }
jQuery:
var right = $('#right'),
left = $('#left');
$(window).on('resize',positionRightDiv);
function positionRightDiv(){
var posLeft = left.offset().left + left.outerWidth(true),
posTop = left.offset().top;
right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();
Note: for this method to work, #wrapper must not have position:relative; nor overlow:hidden;
P.S. Nice atom heart mother profile pic ;-)