I can not change HTML that's given below, only CSS can be changed.
Also "mcontainer" has variable height.
HTML IS:
<div id="contentcontainer">
<div id="sidebar" class="sidebar"></div>
<div id="mcontainer" class="container"></div>
</div>
#contentcontainer {
position: absolute;
width: 100%;
}
#mcontainer { /*To make it appear on the top*/
clear: both;
height: auto;
margin-top: 0;
padding-right: 0;
position: fixed;
width: 100% !important;
}
#sidebar {
float: left;
position: relative;
width: 100% !important;
}
mcontainer completely overlaps sidebar
I want that sidebar should be displayed below mcontainer
How is it possible?
You have seriously learnt a lot of positioning I guess. It's a total mess.
Basically here's what you want:
HTML:
<div id="contentcontainer">
<div id="sidebar" class="sidebar">2</div>
<div id="mcontainer" class="container">3</div>
</div>
CSS:
#contentcontainer {
position: relative;
background:#ddd;
}
#mcontainer { /*To make it appear on the top*/
position: absolute;
top:0;
}
#sidebar {
position: absolute;
top:30px;
}
Related
So, I tried to create 2 floating divs inside a parent div whose position is set to fixed and the 2 children floats to left and right. But for some reson the code is not working as expected. Here is my fiddle: http://jsfiddle.net/adityasingh773/cqn73m0p/
What I tried to achieve is make these 2 children divs float according to their CSS property i.e. to the left and right. I don't like to assign width to each child elements as it will make the code non-responsive.
Here is what I tried
HTML
<div class="container">
<nav class="top-nav">
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</nav>
</div>
And CSS
body{
margin: 0;
padding: 0;
}
.container{
width: 80%;
margin: 0 auto;
}
nav.top-nav{
position: fixed;
top: 0;
display: block;
}
.left{
position: relative;
float: left;
}
.right{
position: relative;
float: right;
}
Your .topnav does not have width. In regards to the fixed nav not confining itself to the container, Fixed position but relative to container will probably help you.
body {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
nav.top-nav {
position: fixed;
top: 0;
left: 0; //added so right is visible
display: block;
width: 100%;
}
.left {
position: relative;
float: left;
}
.right {
position: relative;
float: right;
}
<body>
<div class="container">
<nav class="top-nav">
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</nav>
</div>
</body>
I have readed alot and still didn't position my footer proper. I am trying to position my footer to stay at the bottom of the page and be visible only when I scroll to the bottom.
I have added the folowing classes to the page:
<div class="wrap">
<!-- Holds all the page content inside -->
<div class="spacer"></div>
</div>
<div class="footer">
.....
</div>
I have added the folowing css to the classes:
.wrap {
min-height: 100%;
margin-bottom: -100px;
padding:5%;
}
/* Set the fixed height of the footer here */
.footer {
position: relative;
background-color: #222;
z-index: 1;
}
.spacer, #footer {
height: 100px;
}
What am I doing wrong and preventing the footer to stay always at the bottom?
Position your footer as absolute and add bottom: 0 to your footer class.
.footer {
...
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
More elegant solution would be like this
html, body{
margin: 0;padding:0;
}
.fake-body{
height: 200px;
overflow: auto;
}
.wrap {
position:relative;
}
/* Set the fixed height of the footer here */
.footer {
position: absolute;
background-color: #222;
z-index: 1;
bottom:0;
left:0;
right:0;
color:white;
}
.spacer, #footer {
height: 300px;
}
<div class="fake-body">
<div class="wrap">
<div class="spacer">spacer</div>
<div class="footer">footer</div>
</div>
</div>
Add this to the footer class
position: relative;
bottom: 0;
margin: 20px 0 0 0;
width: 100%;
This will keep the footer to the bottom
<div class="footer">
Your content
</div>
I want to achieve a flexible container with three images. One large one the left, two smaller ones (roughly one quarter of the size) aligned to the right of it:
When resizing the browser window, I want the three images to adjust accordingly while keeping the original proportions so the large image's baseline keeps aligned with the lower small image's baseline.
So far, I've tried the following code:
<div id="space">
<div id="large">
<img src="http://placehold.it/640x420" />
</div>
<div class="small">
<img src="http://placehold.it/320x200" />
</div>
<div class="small">
<img src="http://placehold.it/320x200" />
</div>
</div>
#space {
width:100%;
}
#large {
width:60%;
float:left;
margin:1% 1%;
padding:0px;
}
.small {
width:30%;
float:left;
margin:1% 1%;
padding:0px;
}
img {
width:100%;
height:auto;
padding:0px;
margin:0px;
}
In case the images are slightly higher than the proportions allow, the images should be vertically centered in the respective container, the overflow should be hidden.
You can find this code on JSFIDDLE: https://jsfiddle.net/u8kksgbq/12/
Please help - I've been trying and trying and don't find a solution.
Thanks for your answers. This my final solution:
<section id="contact-pics">
<div class="pic-large">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
<div class="v-spacer">
<div class="dummy"></div>
<div class="pic-content">
</div>
</div>
<div class="pic-small">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
<div class="h-spacer">
<div class="dummy"></div>
<div class="pic-content">
</div>
</div>
<div class="pic-small">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
</section>
And the CSS:
#contact-pics {
img {
width: 100%;
height: auto;
}
overflow: auto;
.pic-large {
display: inline-block;
position: relative;
width: 65.99%;
float:left;
.dummy {
padding-top: 62%;
}
}
.pic-small {
display: inline-block;
position: relative;
width: 32.8%;
float:left;
.dummy {
padding-top: 62%;
}
}
.v-spacer {
display: inline-block;
position: relative;
width: 1.2%;
float:left;
.dummy {
padding-top: 2535%;
}
}
.h-spacer {
display: inline-block;
position: relative;
width: 32.333333%;
float:left;
.dummy {
padding-top: 2.4%;
}
}
.pic-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
Guess there are easier solutions, but this one definitely works :-)
Fiddle
I don't know how much of an answer it is, but I gave it a try.
You have to put a vertical separator between small and large images, that way you can specify the "fake" margin between them in width: xx%;
As for horizontal separator, I tried it, but couldn't get it. The only solution that I can see is to create a transparent image and put between them. Set its width: 30% , just like the photos and that way it will keep the height: auto too.
Thanks for your question, I have tested some solutions and found the answer for # is the correct one, but the code isn't placed correctly. I have edited CSS as follow:
#contact-pics {
overflow: auto;
}
#contact-pics img {
width: 100%;
height: auto;
}
.pic-large {
display: inline-block;
position: relative;
width: 65.99%;
float:right;
}
.pic-large .dummy {
padding-top: 62%;
}
.pic-small {
display: inline-block;
position: relative;
width: 32.8%;
float:right;
}
.pic-small .dummy {
padding-top: 62%;
}
.v-spacer {
display: inline-block;
position: relative;
width: 1.2%;
float:right;
}
.v-spacer .dummy {
padding-top: 2535%;
}
.h-spacer {
display: inline-block;
position: relative;
width: 32.333333%;
float:right;
}
.h-spacer .dummy {
padding-top: 2.4%;
}
.pic-content {
position: absolute;
/*top: 0;*/
bottom: 0;
left: 0;
right: 0;
}
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.