I have a sidebar on page which should have background color all the way to the right side so it can't be inside container (or it can?). I am struggling with positioning it so that the content and sidebar don't overlap.
But my question is how can I push the sidebar on smaller screens after content? (without having duplicate content)
I am trying to mess a little as possible with Bootstrap code so that it doesn't break somewhere later
https://jsfiddle.net/vzoz53zm/
#sidebar {
position: absolute;
right: 0;
width: 35%;
max-width: 300px;
}
#media only screen and (max-width: 480px) {
#sidebar {
position: relative;
width: 100%;
}
}
<div id="sidebar">
<p>
SIDEBAR
</p>
</div>
<div class="container">
<div class="main">
CONTENT
</div>
</div>
You just need to move your HTML for the side bar after the container, and add top: 0; to your #sidebar styles. At the moment your sidebar appears first in the document, you have removed it from the document flow using absolute positioning, but when you insert it back in (setting it to position: relative;) it goes back into the document above the .container div.
See fiddle. https://jsfiddle.net/vzoz53zm/1/
Add top:0 styles to the sidebar styles, it will meet the requirement.
Related
I need to add a logo and title on the top and bottom of every page while printing.
The contents of the page is dynamic and the span/div could extend to multiple pages. The position for page break cannot be determined as the contents are in a single div or span.
I have tried adding header and footer div and tags. But the header and footer is only displayed once at the start of first page and end of the last page respectively. Is there any way to print on every page ?
HTML
<div class="header">HEADER GOES HERE</div>
<div class="content">content content content</div>
<div class="footer">FOOTER GOES HERE</div>
CSS
#media print{
.header{
position: fixed;
top: 0;
}
.footer{
position: fixed;
bottom: 0;
}
}
#media screen{
.header{
display:none;
}
.footer{
display:none;
}
}
You'll need to play around with the margins so that your header and footer doesn't overlap your content though
Try using position: fixed; it should work for that.
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
I would like to be able to create a div that spans the entire width of the screen. The problem is, this should work along with Weebly's design system, which places it inside a div of fixed width.
The content is created as the following:
#main-wrap {
width:100%;
}
.container {
margin: 0 auto;
width: 960px;
position: relative;
}
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
Inside {content} is where Weebly does its magic and puts all your stuff. I tried to directly embed some code:
.wide {
position: absolute;
left:0; right:0;
width: 100vw;
background: #aaccff;
}
<div class="wide">
Test
</div>
But this did not work, and the wide div was wider than the screen, but only starts at the same left position as the content div.
Does anyone know how to get a 100% wide div inside of the container. I could also make container 100% wide, but then all of the Weebly widgets go the full length of the screen, and its not clear how I can modify the CSS To make them have fixed width.
Thanks!
It's because of that the parent has is relative positioned. So, remove position: relative; from element .container
I have a two column layout, one column is the document content and the other is the navigation. I've set this up using a Bootstrap row, one column is 8 units wide and the other is 3 units wide with an offset of 1 unit. I've set the navigation content to fixed so that it stays on the page.
On some of the pages I want to have an image at the top of the navigation column. I want this image to be responsive and stay within the 3 unit column and be fixed along with the navigation. However, when you set the content to fixed the image is no longer constrained within the 3 unit column.
I've set up a jsfiddle of the problem at http://jsfiddle.net/yKUZW/3/.
Here is the example html:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content goes here...</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed">
<img class="img-responsive" src="http://placekitten.com/300/200">
Some links go here.
</div>
</div>
</div>
</div>
And the relevant css:
.fixed {
position: fixed;
top: 150px;
}
Notice that when the page is resized horizontally the image stretches outside of the light grey container area. What I want is for the right hand side of the image to always align exactly with the right hand edge of the container, resizing the image as needed.
How would I go about accomplishing this?
The Problem
Ignore the image for a second... .img-responsive just makes the image take up 100% of the available space in the parent container.
Then the question becomes, can I add position: fixed to a div and still have it take up the same width as it's parent which has .col-xs-3 (width: 25%)? Once we resolve that, the image should fall into line.
As you may already know about fixed positioning:
for a fixed positioned box, the containing block is established by the viewport
Meaning Fixed is always relative to the parent window, never an element.
Simple Solution
If the viewport is the same width as the parent div, this can be resolved trivially:
HTML:
<div class="row">
<div class="col-xs-9" id="content">C</div>
<div class="col-xs-3">
<div id="navbar">Navbar</div>
</div>
</div>
Relative - div takes up 100% of width of parent (.col-xs-3):
#navbar {
background: yellow;
position: relative;
}
Fixed - div takes up 100% of screen - apply .col-xs-3 width ourselves:
#navbar {
background: yellow;
position: fixed;
width: 25%;
}
Demo in Fiddle
Better Solution
However, that solution isn't much help to us because the the .container class applies variable widths at different breakpoints to the row. This causes 25% of the parent div and 25% of the viewport to get out of sync.
So how can we get them to sync up again?
To answer that, let's look at exactly what .container is doing:
.container {
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
So instead of trivially being able to apply a 25% width, we now have to mimic the width applied by .container. Here's how:
Here's some sample markup:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1" id="sidebar-outer">
<div id="sidebar">
Width: <span id="width-placeholder"></span>px
</div>
</div>
</div>
</div>
Now we can apply a width at all breakpoints with the following CSS:
#sidebar {
background: yellow;
position: fixed;
width: 25%;
}
#media (min-width: 768px) {
#sidebar {
width: 158px; /* 632 * .25 */
}
}
#media (min-width: 992px) {
#sidebar {
width: 213px; /* 852 * .25 */
}
}
#media (min-width: 1200px) {
#sidebar {
width: 263px; /* 1052 * .25 */
}
}
Here's a side by side comparison of using relative vs fixed position with styling:
Demo in Fiddle
Back to our problem at hand:
Just take the demo from above and add back in our responsive image:
Solution Demo in Fiddle
As a note: most sites opt to use a fixed width side navbar when using position:fixed in order to sidestep these kinds of issues.
After messing with it a bit I believe the best way would be to remove the the fixed div from the bootstrap column, and place it higher up in the dom, or at least outside of the row. There is a lot of negative margin and strange padding stuff going on to get the BS cols to work properly and it is pushing your fixed div around. If it were me and this was going to be a main feature on the site I would make a div with width 100%, abs pos, top left right bottom all at 0, and then place the fixed div inside of that. For a fixed pos div you want it to live in a relative pos parent with right set to 0 and top set to 150 in your case. If the parent is 100% of the windows width then you have pretty good control over where it goes using either px or %.
Thanks Kyle for the amazing solution you described at the top.
Here is a solution for 8/4 situation in a normal container (not fluid)
<div class='container'>
<div class='row'>
<div class='col-xs-8> something here </div>
<div class='col-xs-4>
<div id='sidebar'> content
</div>
</div>
</div>
</div>
and here the css
#sidebar {
background: blue;
position: fixed;
width: 33.3333%;
}
#media (min-width: 768px) {
#sidebar {
width: 235px;
}
}
#media (min-width: 992px) {
#sidebar {
width: 309px;
}
}
#media (min-width: 1200px) {
#sidebar {
width: 375px;
}
}
I want to change the width of the area that i present things (the body), i add picture for better understanding of what i'm looking for:
(the yellow mark is the width that i'm looking for to my HTML body, How can i do it ?
I'm using MVC 4 w/ bootstrap.
Additional info: I have a navbar that require from me to add style configures in the '_layout' in order to display the page in a proper way and not to allow the navbar to be over the body content, here is it:
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.aligntobottom {
bottom: 0;
position: absolute;
}
</style>
What i need to add to the style markup in order to get what i want?
Update This is how i render the body (in the '_layout'):
<div class="container">
#if (IsSectionDefined("featured"))
{
<div class="hero-unit">
#RenderSection("featured", required: false)
</div>
}
#RenderBody()
</div> <!-- /container -->
So its inside a container at the first place.(i render the body into the container)
update
**I notice that the problem is because the '#media' :
But now i see that i have a couple of #media section in my CSS:
#media (min-width: 768px) {
.container {
width: 550px;
/*width: 750px;*/
/*MAYBE THIS*/
}
#media (min-width: 992px) {
.container {
width: 550px;
/*width: 970px;*/
/*MAYBE THIS*/
}
#media (min-width: 1200px) {
.container {
/*width: 1170px;*/
width: 550px;
/*MAYBE THIS*/
}
what i need to change in order to keep the suitability for all type of browser and screens ??
I change all of them(1200px, 992px, 768px) like the code i post, how can i know which one i'm currently using ? hence what my media width?
If I read your post correctly, I think you're trying to make the content narrower keeping the nav bar to the full width.... then I suggest changing the following
<div id="navbar">
code of the navigation bar
</div>
<div id="content" >
content
</div>
and then change the stile to look like this
#navbar{
width:100%;
/*other styles*/
}
#content{
width:920px;/*change the value to suite ur need*/
margin:0 auto;/*this will center ur content*/
}
If you want to make the nav bar the same width as the content then add the #navbar div inside the content div as follows:
<div id="content">
<div id="navbar">
code of the navigation bar
</div>
content
</div>
create a new div, just after the body tag, put everything inside it, give width (eg 1200px) and margin:0 auto; to keep it at the center of the screen.
if you are using bootstrap, put everything inside of "container".
There's no need to modify the CSS, jsut put the content of your page inside a
<div class="container">
<!-- More HTML here -->
</div>
If you want to make is narrower you could use:
<div class="container">
<div class="row">
<div class="col-lg-offset-1 col-lg-10">
</div>
</div>
</div>