I have an MVC web site and the Div's are not auto-sizing
I've set overflow to auto, I've set a minimum height
<div class="content-wrapper">
<div class="jetdocs-header">
<img src="~/Content/images/logo_header.png" />
</div>
<div class="content-section">
<div class="content-menu">
</div>
<div class="content-body">
<div style="width: 900px; height: 30px;">
</div>
#RenderBody()
</div>
</div>
</div>
here is the CSS
.content-wrapper {
background-image: url('images/top.gif');
background-repeat: repeat-x;
width: 1155px;
position: relative;
margin: 0px auto 0 auto;
background-color: whitesmoke;
border-radius: 5px;
margin-top: 5px;
padding-bottom: 35px;
min-height: 600px;
overflow: auto;
}
.content-section {
top: 5px;
position: relative;
background-color: whitesmoke;
overflow: auto;
}
.content-menu {
position: relative;
width: 140px;
min-height: 700px;
height: 100%;
background-color: silver;
float: left;
overflow: auto;
}
.content-body {
position: relative;
width: 1000px;
float: left;
left: 2px;
background-color: whitesmoke;
overflow: auto;
}
The Content-Menu should auto-size to the same height as the content-section. and both should cause the content-wrapper to auto-size to match the height of the largest of the two...
Don't think this c# related, but have you tried setting the height of the parent divs? I think even if you specify min-height, it still needs height for the overflow to work correct.
I think use should use the css3 flexbox properties on the '.content-section'.
.content-section
{
display: flex;
align-items: stretch;
}
.content-body
{
min-height: 600px;
}
The Content-Menu will get the size of the Content-Body (or invers if the Content-Menu is higher), and the Content-Section will auto-size to match the height of the childs. More info about align-items here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I'm a complete noob at css and I'm trying to learn, but I've hit a wall. I have a div container with 2 divs inside of it. I want to be able to make the left div resize slower than the right div.
EX: Fullscreen
----|--------
EX: window shrunk
---|-----
I'd like the right div to shrink to a minimum of 200px before the left div starts to shrink.
Here's what I have so far but It's not working
.container{
position: relative;
border: 3px solid black;
border-radius: 10px;
height: 60px;
max-width: 900px;
min-width: 400px;
margin: 10px;
}
.left{
position: absolute;
height: inherit;
max-width: 200px;
min-width: 100;
float: left;
}
.right{
position: absolute;
height: inherit;
max-width: 900px;
min-width: 400px;
left: 200px;
}
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
I think the best way to do this is using flexbox and adding max-width on your left div and min-width on your right.
This is a great guide for all things flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and the MDN link for full specs.
.container {
display: flex;
width: 100%;
}
.left {
flex: 1 1 0;
height: 50px;
background: green;
max-width: 200px;
}
.right {
flex: 1 1 0;
height: 50px;
background: red;
min-width: 200px;
}
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
I have a layout which uses flexbox to position a main content section and a sidebar element beside each other, with justify-content: space-between for consistent spacing within a container, however I need the sidebar on the right to also scroll down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
Example pen: https://codepen.io/StyleMeLikeOneOfYourFrenchGirls/pen/BazQOLj
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
/*position: fixed;*/
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
I understand that fixed removes the element from document flow, and thus eliminates the simplicity of the flex layout and the ability to 'contain' something within it's parent element.
I've been able to achieve something close to what I want, but it requires specific values for different viewport widths (e.g. using Bootstrap's offset classes, transform: translateX() or various combinations of margins). These methods are messy though, and don't provide a consistent solution to keeping the sidebar aligned with the edge of the parent container.
Is there a simpler/more elegant solution to this problem?
You can use position: sticky;. It respects the flex and has a fixed purpose.
DEMO:
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
Please have a look...
body {
margin: 0;
}
.container {
width: 1000px;
display: block;
margin: 0 auto;
}
.content {
background: #999;
height: 100vh;
overflow: auto;
display: flex;
}
.leftContent {
display: flex;
width: calc( 100% - 300px );
}
.rightSidebar {
position: absolute;
right: calc(50% - 500px);
background: #666;
height: 100vh;
width: 300px;
overflow: auto;
}
<div class="container">
<div class="content">
<div class="leftContent">
a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a a a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a aa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<div class="rightSidebar">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
</div>
</div>
</div>
Here is a try with minimum impact on your code.
The setup you have limits a bit the options you have, but I think below Pen would be a nice workaround.
.left-content {
height: 1000px;
width: 100%;
max-width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 100%;
max-width: 15%;
background-color: yellow;
position: fixed;
right: 20%;
}
CodePen
Sidebar on the right hand side scrolls down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
I've made some code where the "section" that automatically determines the height when the content is inside, however, I want to have multiple columns in the same row and the columns are currently stacking.
How would I set the columns on to the same row without using float element as it takes the auto height of the section away?
.section {
width:100%;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 62px;
padding-left: 0px;
background-color: #f5f5f5;
position: relative;
}
.row {
position: relative;
width: 100%;
max-width: 1080px;
margin: auto;
padding: 33px 0;
}
.column{
width: 100%;
position: relative;
z-index: 9;
}
.container {
overflow: hidden !important;
position: relative;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
width: 300px;
height: 500px;
border-radius: 0px;
}
<div class="section">
<div class="row">
<div class="column">
<div class="container">
<img src="img.png">
<div class="content_block">
<div class="text">
<h2>Title</h2>
<a>2 reports</a>
</div>
</div>
</div>
</div>
<div class="column">
</div>
</div>
</div>
The easiest way would be to use flexbox.
So just add ..
display: flex;
.. and you could probably remove the width (or set it to 50%)
.row {
display: flex;
position: relative;
width: 50%;
max-width: 1080px;
margin: auto;
padding: 33px 0;
}
There are other ways of course (colspan, inline-block) but flexbox will give you even-height columns and make any other formatting much easier.
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ
I want to center a fixed div inside its parent. The width of the fixed div should have the width of its parent. But it does not work, what is wrong?
js fiddle
HTML
<div class="container">
<div class="wrap">
<div class="center" >
centered
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 400px;
border:solid;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.wrap {
height: 800px;
width: 100%;
position: relative;
text-align: center;
}
.center{
background: red;
position: fixed;
bottom: 100px;
width: inherit;
}
change .wrap's width:
.wrap {
height: 800px;
width: inherit;
position: relative;
text-align: center;
}