I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
Related
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.
In the code below I want the following conditions to hold:
The pink div always spans the viewport.
The pink div's text is always centered in the viewport.
The blue div floats to the right when the screen is "sufficiently wide."
The blue div stacks below the pink div when the screen is not "sufficiently wide."
The blue div spans the viewport and its text is centered when stacked.
The solution should be pure CSS.
Here's my current pass:
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
position: relative;
background-color: white;
width: 100%;
height: 20px;
}
#center {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background-color: pink;
text-align: center;
}
#placeholder {
position: relative;
height: 20px;
width: 500px;
}
#right {
position: relative;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div id="parent">
<div id="center">This text should always be centered in the VIEWPORT</div>
<div id="right">this text should float to the right</div>
<div id="placeholder"></div>
</div>
</body>
</html>
Here's what it currently looks like when the screen is wide (correct):
Here's what it looks like when the screen is narrow (incorrect):
Here's what it should look like when the screen is narrow:
Are you looking for something like this? https://jsfiddle.net/DIRTY_SMITH/v7k4oky8/4/
edited fiddle for proper text align
body{margin: 0;}
#parent {
position: relative;
background-color: white;
width: 100%;
height: 20px;
}
#center {
float: left;
margin: auto;
width: calc(100% - 500px);
background-color: pink;
padding-left: 250px;
}
#right {
float: left;
background-color: blue;
width: 250px;
}
#media (max-width: 610px){
#right {width: 100%; text-align: center;}
#center {width: 100%;}
}
This has worked for me to keep a spinning image in the same location on each side of the screen. Adjust left / right and top to position each div on either side.
<div class="col" style="overflow: none; z-index: 9999;">
<div id="spinning-circle" class="row" style="position:absolute; top:750px; left:-25px; z-index:1; width: auto!important;">
<img src="../certdb/images/left-bubble.png">
</div>
<div id="spinning-circle" class="row" style="position:absolute; top:250px; right:-145px; z-index:1; width: auto!important;">
<img src="../certdb/images/right-bubble.png">
</div>
</div>
BODY ->
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
Page Container ->
.Site-content {
flex: 1;
margin: auto;
margin-top: 5%;
max-width: 1500px;
min-height: 80%;
https://jsfiddle.net/znLv6peg/11/
Here is my solution. I don't know if this is best. For one thing, it requires you to set explicit heights. I set the defaults for mobile and altered for large screens per a best practice I read somewhere. I noticed that if you put this in JSFiddle it doesn't work properly, but it does if you use it in a browser (only Firefox tested).
<!DOCTYPE html>
<html>
<head>
<style>
body{margin: 0;}
#parent {
position: relative;
width: 100%;
height: 40px;
text-align:center;
}
#center {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background-color: pink;
}
#right {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background-color: #00FFFF;
}
#media only screen and (min-width: 480px) {
#parent {
height: 20px;
}
#right {
position: relative;
float: right;
top: 0;
}
}
</style>
</head>
<body>
<div id="parent">
<div id="center">This text should always be centered in the VIEWPORT</div>
<div id="right">this text should float to the right</div>
</div>
</body>
</html>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. Any help appreciated!
image: http://i.imgur.com/FPuSiIu.png
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
css:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin on both sides.
JSFiddle
CSS
#container{
position: relative;
}
#left, #right {
width: 200px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
#center {
margin: 0 200px;
}
i've done this on my layout and it works fine for me
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container{
display: inline-flex;
width: 100%;
height: 100%;
background: lightblue;
}
#left {
width: 240px!important;
min-width: 240px!important;
background: red;
height: 100%;
}
#right {
width: 400px!important;
min-width: 400px!important;
background: red;
height: 100%;
}
#center {
background: blue;
width: 100%;
min-width: 600px;
height: 100%;
}
See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!
Thanks!
This is how I do it:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
Example here
I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
And here's the CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)
Good luck!
This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
See demo.
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
This is the most straight forward solution I could think of.
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}