Why does my sidebar leave out of wrapper when its width reaches 1920px? I know I set the max-width on wrapper in order to maintain the size for 4k and bigger screens, but how do I keep the sidebar within the wrapper even when the size of the screen goes over 1920px?
html {
background-color: black;
}
.wrapper {
max-width: 1920px;
border: 2px dotted violet;
margin: 0 auto;
}
.sidebar {
width: 180px;
position: fixed;
top: 15%;
left: 0;
}
/*first section*/
.section {
margin-left: 150px;
border: 2px dotted yellow;
}
.publicarea {
width: 45%;
margin: 10rem auto;
border: 2px dotted blue;
}
.img-bookcontainer {
min-width: 10rem;
min-height: auto;
width: 55%;
height: 100%;
border: 2px dotted red;
margin: 0 auto;
}
.img-bookcontainer img {
max-width: 100%;
height: auto;
display: inline-block;
}
<div class="wrapper">
<div class="sidebar">
<div class="img-container">
<img src="/images/franzen-vertical-transparent.webp" alt="">
</div>
</div>
<div class="section">
<div class="publicarea">
<div class="img-bookcontainer">
<img src="/images/crossroads-3d-1.webp" alt="">
</div>
</div>
</div>
</div>
The reason why your sidebar is leaving the wrapper when the screen size reaches 1920px is because of the fixed position you set on the sidebar. When you set a fixed position, the element is taken out of the normal document flow and positioned relative to the viewport, which means it's not affected by the container's width or height.
To keep the sidebar within the wrapper, you can use absolute positioning instead of fixed positioning. This will position the sidebar relative to the wrapper instead of the viewport.
Here's what you can do:
Change the position property of the sidebar from "fixed" to "absolute":
.sidebar {
position: absolute;
top: 15%;
left: 0;
width: 180px;
}
Add "position: relative" to the wrapper so that the sidebar is positioned relative to the wrapper:
.wrapper {
max-width: 1920px;
border: 2px dotted violet;
margin: 0 auto;
position: relative;
}
With these changes, the sidebar will stay within the wrapper even when the screen size goes over 1920px.
I hope this helps! Let me know if you have any further questions.
Related
I am trying to design a sidebar component for a mobile responsive web app. The goal is to have the sidebar respond to different screen sizes. However, as the screen size gets smaller, the bottom div will overlap the top div, which has a fixed height. You can see a generalized example of the issue here on codepen and described in this picture.
Here is a simplified snippet of the html/css from codepen
.container {
width: 10%;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
}
.div1 {
height: 250px;
position: absolute;
top: 0;
}
.div2 {
height: 75px;
position: absolute;
bottom: 0;
}
<div class='main'>
<div class='container'>
<div class='div1'>
content div1
</div>
<div class='div2'>
content div2
</div>
</div>
</div>
What properties do you have to give (div2) to stop overlapping when it begins to encroach on div1? The desired outcome is that div2 will always be aligned vertically and the overlap with continue passed the screens current height and you would just have to scroll down to see the content of div2.
Change the css properties of div2 to this:
.div2 {
max-height: 75px;
height: 20%;
position: absolute;
bottom: 0;
background-color: lightyellow;
border: 1px dotted black;
}
The maximum height of the div2 will be 75 (so on larger screens it will be 75px, as you intended), but, as you make the screen shorter, it will start to decrease.
You can also create a media query for smaller screens.
Here is one, replace the height measurement from px to % this will cause the divs to take height according to the height of their container the following is an example
.container {
width: 10%;
border: 1px solid black;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
}
.div1 {
height: 40%;
position: absolute;
top: 0;
background-color: lightblue;
border: 1px dotted black;
}
.div2 {
height: 25%;
position: absolute;
bottom: 0;
background-color: lightyellow;
border: 1px dotted black;
}
<div class='main'>
<div class='container'>
<div class='div1'>
content
</div>
<div class='div2'>
content
</div>
</div>
</div>
I have two divs. outer div taking 25%. And the inner div is placed at the bottom (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red) But this is not taking 25%.
I am adding border for this div. So there is an white space is showing because of the width.
HTML:
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
CSS:
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
How to apply exactly apply 25% width to inner-div which has position fixed ?
UPDATE Added js fiddle in comment
Remove your body margin . This issue because of you don't remove your body margin you can simply fix this
body {
margin:0;
}
body {
margin:0;
}
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
<body>
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
</body>
The real reason why inner-div has more width than outer-div is because inner-div has position: fixed applied to it.
Now when you apply position: fixed, it makes the element position relative to the viewport.
So, in this case inner-div is relative to the body which has some user-agent margin styles applied. To make them have same width apply margin: 0 to the body.
Also, apply box-sizing: border-box to outer-div to exclude the border in the width.
I have updated the fiddle for you. So both divs have the same width.
https://jsfiddle.net/nashcheez/uur2h5w3/4/
Fixed position is relative to the browser window hence percentage values will be relative to the <html> element (http://www.w3schools.com/cssref/pr_class_position.asp). Although experimental position:sticky might accomplish what you need since it is relative to the viewport (parent relative element).
You can use below css for this
#inner-div {
box-sizing: border-box;
}
You can check updated fiddle
You need to reset body for browser. For this reason "inner-div" is taking space.
body{margin:0;padding:0;}
body{margin:0;padding:0;}
#main-div{
height: 100%;
width: 100%;
display: table;
background: blue none repeat scroll 0 0;
border: 1px solid blue;
}
#outer-div {
width: 25%;
border: 1px solid green;
}
#div-1 {
width: 100%;
}
#div-2 {
display: table;
height: 0;
padding-right: 2px;
width: 100%;
}
#inner-div {
text-align: center;
position: fixed;
bottom: 0;
width: 25%;
border-top: 1px solid red;
padding-bottom: 27px;
padding-top: 10px;
}
<div id="main-div">
<div id="outer-div"> //list
<div id="div-1"> //parent-scrol
<div id="div-2"> //scroll
<div id="div-3"> //inner-list
<div id="inner-div">wefffef</div> //create-new
</div>
</div>
</div>
</div>
</div>
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I have a parent div that contains a child div. I want the parent div to resize automatically so the child is always inside the parent's borders. Right now the bottom of the child div is extending beyond the bottom of the parent because of relative positioning. How do I get the parent resize?
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
height: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
top: 20px;
left: 20px;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
Relative positioning moves the element visually so if you want to contain it within the parent you'll need another method to move the child element.
Margin would seem to be the most obvious choice
#parentDiv {
background-color: #eae;
width: 500px;
margin: 40px;
overflow: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
margin-top: 20px;
margin-left: 20px;
<div id="parentDiv">
<div id="childDiv"></div>
</div>
Got rid of the positioning of the childDiv.
Outlined the elements so you can see them clearly.
Since there's min and max dimensions, I put 100% height and width for explicit measurements.
body {
height: 100vh;
width: 100vw;
}
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
outline: 2px dashed blue;
}
#childDiv {
max-width: 400px;
width: 100%;
min-height: 200px;
height: 100%;
background-color: #B9D7D9;
outline: 2px solid red;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
I'm trying to get a div to fill the remaining height of a div. Here's my HTML and CSS:
CSS:
* {
padding: 0px;
margin: 0px;
}
#container {
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
width: 250px;
height: 100%;
background: #666666;
}
HTML:
<div id="container">
<div id="topbar">
</div>
<div id="leftbar">
</div>
</div>
I expected leftbar to fill the height between the bottom of topbar and the bottom of container, but it's scretching container so that leftbar is 100% of the page height.
You can stretch the leftbar with absolute positioning and setting the top/bottom values:
* {
padding: 0px;
margin: 0px;
}
#container {
position: relative;
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
position: absolute;
top: 85px;
bottom: 0;
width: 250px;
background: red;
}
Fiddle:
http://jsfiddle.net/robertp/CQ7pf/
Try adding this to container:
position: relative;
and then add this to leftbar:
position: absolute;
top: 0;
bottom: 0;
Set your left bar to position: relative;
So leftbar should be container's height minus topbar's height. Since container and topbar have hard-coded height values, it follows that leftbar will have to be hard-coded also. It's not the prettiest thing in the world but it's simpler than the alternative, JavaScript.
If container is 500px in height, subtract the height of topbar (85) and container's margin (85) to arrive at a height of 330px. Since container uses min-height, use min-height for leftbar also to allow it to stretch the container if need be. You should also change leftbar's position to relative to render the height of container correctly.
Bottom line:
#leftbar {
position: relative;
min-height: 330px;
}