Hello Stack overflow users.
I'm in a bit of a struggle here, I have 4 divs.
I would like for div 4 to have it's width adjusted if the screen size is adjusted. Basically just stay within the other divs, and adjust.
Div 1,2 and 3 all have position:fixed to avoid them from moving when a user scrolls on the page.
But whatever I try, with width:autoETC. div 4 keeps going the full length behind div 3. I have a margin set for it to pass by div 1's width length.
I've been having a hard time wrapping my head around this one, the code for my divs are listed below.
.navbar-left {
position: fixed;
width: 325px;
top: 0px;
bottom: 0;
z-index: 1001;
height:auto;
}
.navbar-top{
width:100%;
height:60px;
position:fixed;
top:0;
z-index:1002;
}
.navbar-right{
width: 365px;
top:0;
height:100%;
position:fixed;
right:0;
}
Div 4 is not listed, as the code did not work. Any help is greatly appreciated.
Try this fiddle
If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.
In main div to set the width use this:
width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars
HTML
<div clas="container">
<div class="top">top</div>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
CSS
.container {width: 100%; height: 100%;}
.top {
position: fixed;
clear: both;
width: 100%;
height: 20%;
background-color: #d5d5d5;
}
.left {
position: fixed;
top: 20%;
width: 40px;
float: left;
height: 80%;
background-color: green;
}
.main {
width: calc(100% - 80px);
height: 80%;
position: fixed;
top: 20%;
left: 40px;
background-color: grey;
}
.right {
width: 40px;
height: 80%;
position: fixed;
top: 20%;
right: 0;
background-color: green;
}
Try this code...
.div4{ width:calc(100% - 730px);
background-color: green;
margin:0 auto;
position:relative;
top:60px;}
where 730px is sum of left and right div widths...
Use percents for navbar-left, navbar-right and the middle portion.
Do not forget to set top:60px (height of navbar-top) for the left and right divs.
jsFiddle Demo
/* *CSS:* */
div {
position: relative;
box-sizing: border-box;
}
.navbar-top {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
z-index: 2;
}
.navbar-left {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
left: 0;
z-index: 1;
}
.navbar-right {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
right: 0;
}
.myBody {
width: 60%;
margin: 60px auto 0px;
}
.navbar-top {
background: blue;
}
.navbar-left {
background: red;
}
.navbar-right {
background: green;
}
.navbar-top {
background: wheat;
}
<!-- **HTML:** -->
<div class="navbar-top">navbar-TOP</div>
<div class="navbar-left">navbar-LEFT</div>
<div class="navbar-right">navbar-RIGHT</div>
<div class="myBody"> My body lies over the ocean... hummmmm </div>
Give each a width that will equal to 100%. Give left div 20% div 4 60% and right div 20%. Or, with existing code, give 4th div 100%.
Related
The below code is the closet I was able to achieve and exactly how I need it to function, the only problem with this approach is that because the fixed div is layered on top of the main div, it renders the main container not clickable.
This is how I need the layout to function:
There should be three columns, the outer two columns (sidepanels, left and right) are fixed.
The header and footer are also fixed and take up the max width of the
center "main" column (and are positioned in the center like the center "main" column).
On window resize, only the width of the center column (along with the
header and footer) is auto adjusted while the side columns stay the same
width (squeezing the center column).
I am trying to avoid the use of flexbox for browser compatibility.
body {
background: #333;
color: #FFF;
margin: 0;
height: 100%;
max-width: 1240px;
margin: 0 auto;
}
.fixed {
position: fixed;
z-index: 1;
height: 100%;
width: 100%;
max-width: inherit;
}
.main {
background: #444;
position: relative;
padding: 70px 10px;
height: 1000px;
width: auto;
min-width: 280px;
max-width: 800px;
margin: 0 220px;
}
.header,
.footer {
position: absolute;
background: #555;
height: 60px;
left: 220px;
right: 220px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.left,
.right {
position: absolute;
top: 0;
width: 220px;
background: #666;
height: 100%;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="fixed">
<div class="left">left</div>
<div class="header">header</div>
<div class="footer">footer</div>
<div class="right">right</div>
</div>
<div class="main">
main
</div>
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
I have the following code:
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
top: 10%;
left: 0;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 0;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
My question is why is the top:10% of .p1_1 affecting the position of .p1_2? I would have thought this was a really simple relative placing of the div following the second - unless I'm missing something blindingly obvious?
Ok - so the following code is nearer what I was expecting but how there is 15% of space not 10% (i.e. set margin-top:15% works fine) so I'm confused how 70 + 10 + 20 can't equal 100??
html,body {
padding:0;
margin:0;
height:100%;
position:relative;
}
.container {
width:30%;
margin:0 35%;
background:yellow;
position:absolute;
height:100%;
top:0;
}
.p1_1 {
position:relative;
width:50%;
height:70%;
margin-top:10%;
background-color:green;
}
.p1_2 {
position:relative;
width:100%;
height:20%;
background-color:blue;
}
I've also found http://www.barelyfitz.com/screencast/html-training/css/positioning/ on tab 2 explains how
"Notice the space where div-1 normally would have been if we had not
moved it: now it is an empty space. The next element (div-after) did
not move when we moved div-1. That's because div-1 still occupies that
original space in the document, even though we have moved it."
Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
left: 0;
top: 10%;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 10%;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}