Lets say I have a structure like this.
<div class="container>
<div class="left-col>
some content
</div>
<div class="right column>
<div class="login-form">Login Form</div>
</div>
</div>
Above is the structure of my webpage at 700px width and above.. What I wanted to do is whenever the browser width decreases to 480px and below.. the div class login-form would be at the top and then below of it is my left-col.. is there any way for this? I would love to do it without using the position: absolute
if browser width is 480px and below structure would be like this
<div class="container>
<div class="right column>
<div class="login-form">Login Form</div>
</div>
<div class="left-col>
some content
</div>
</div>
Does your HTML have to be like that or can you swap it around? Meaning the html looks different, but you still have the login form on the right on big screens. It's much simpler if the HTML is:
<div class="container">
<div class="right-col">
<div class="login-form">Login Form</div>
</div>
<div class="left-col">
Some Content
</div>
</div>
Then the CSS:
.left-col {
background: green;
}
.right-col {
background: red;
}
#media (min-width: 481px) {
.container {
overflow: hidden;
}
.left-col {
overflow: hidden;
}
.right-col {
float: right;
margin-left: 10px;
}
}
Working Fiddle: http://jsfiddle.net/jhummel/4aNjd/
There is a way to do this and it is called responsive web design. You would use media queries that will tell the page how to behave at certain sizes.
Lucky for you there are more functions to the position attribute than position:absolute;.In this case, I would use position:relative; and move "left-col" down.
Here is a great article to get you started with Responsive web design. CLICK HERE
Do those divs show up left and right when the browser is 700px? If so...
Just have the "right column" div before the "left-col" in your html. In the css use floats so "right-column" shows up on the right and "left-col" still shows up on the left. I am assuming their widths fit in the container. Then, within your media query give "right column" float:none and width:100% so that when the browser is less than 480px the form div will show up on top.
note: I think you meant "right-column" and not "right column".
<style>
.left-col{
float:left;
}
.right-column{
float:right;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.left-col{float:none; width:100%;}
.right-column{float:none;}
}
</style>
<div class="container>
<div class="right-column>
<div class="login-form">Login Form</div>
</div>
<div class="left-col>
some content
</div>
</div>
Related
I got two numbers of div tag, with float left and the width 50% like the following image :
What i want my div tag position on the screen change like this if the window size changed:
I know that the code must be written into media, for different screen sizes but i don't know what to do in order to change the position of these two DIV tags
<div class="wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
It will be like this, when the width is smaller than 796px the sidebar will be over the content but note that in the html the div.sidebar should be before the div.content
.sidebar{
background:#4F6072;
}
.content{
background:#4F9996;
}
#media only screen and (min-width: 769px) {
.sidebar{
width:50%;
float:right;
}
.content{
width:50%;
float:left;
}
}
<div class="wrapper">
<div class="sidebar">Page sidebar</div>
<div class="content">Page content</div>
</div>
You can also doing this using Bootstrap.
So, You need not to write #media query for that
You can check out link here:
https://jsfiddle.net/md93vpxj/
https://jsfiddle.net/md93vpxj/
I have created a left side bar. Is it possiable to make the side bar fixed on the screen. Whenever i make the screen smaller, the left side bar disappears.
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Categories <span class="sr-only">(current)</span></li>
This is my code for the side bar. it gets the categories name using php from mySql.
You'll need to use media queries to avoid the sidebar go all weird and stuff in smaller screens. For example let's say that we have this:
<div class="container">
<div class="leftSidebar">Left Sidebar</div>
<div class="mainContent">Main Content</div>
<div class="clear"></div>
</div>
I can give my mainContent class a float:right; to be floating on the right side, and then a float:left; to the leftSidebar to be floating on the left side. But we want the sidebar to be fixed so, float:left; doesn't really do nothing here anymore as soon as we say the leftSidebar to be position:fixed;. So here's how we gonna style these both divs:
.leftSidebar {
width: 100px;
height: 300px;
/* Making sidebar fixed */
position:fixed;
}
.mainContent {
width: 400px;
height: 300px;
float: right;
}
Allright!!! We have now a fixed sidebar and a div with the main content align to the right.
What about now? I don't want the sidebar acting all weird and being above the main content when I resize the window or visit the website in smaller screens!
Well this is where the media queries comes in. With media queries we can tell the sidebar to not be fixed anymore
/* Media query to create a fix for smaller screens */
#media (max-width: 450px){
.leftSidebar {
width: 80%; /* Meet your new width Sidebar! */
margin: 0 auto;
position:inherit; /* No more Fixed position for you sidebar!! */
}
.mainContent {
width: 80%; /* Meet your new width mainContent! */
margin: 0 auto;
float:none; /* What are you doing float right? I don't want .mainContent to float right anymore! Now it's float:none; !! */
}
}
An here's the final result and online example
At last we can change the order of the sidebar, either if we want it to appear first than the .mainContent or after .mainContent. For the sidebar appear first:
<div class="leftSidebar">Left Sidebar</div>
<div class="mainContent">Main Content</div>
For the sidebar appear after the .mainContent, just reverse order of the classes:
<div class="mainContent">Main Content</div>
<div class="leftSidebar">Left Sidebar</div>
If I got you right, the sidebar is always visible? If so, add it to your whole grid system.
<div class="container-fluid" id="page">
<div class="row">
<div class="col-xs-9" id="content">MAIN CONTENT</div>
<div class="col-xs-3" id="sidebar">SIDEBAR</div>
</div>
</div>
Based on bootstrap documentation, col-xs is the lowest col size and should also be defined. I've assumed, that you have a 12 column grid. Else you have to change the column settings.
Sidebar doesn't disappear. It falls underneath main content which is good for smaller screen sizes. If you don't need responsive layout you can find more information at bootstrap documentation page.
I have a mobile website with 4 banners that appear side by side. When I get to a certain screen width, I want 2 of them to drop below the other 2. Part of the problem is that I have used width: 24.96% to obtain the right total width of all 4 divs to fit the body.
CSS
.small_banners .banner_block {
display: block;
max-width: 100%;
height: auto;
width: 24.96%; }
.small_banners {
float: left;
clear: both;
width: 100%;
margin: 0 0 15px; }
HTML
<div class="small_banners">
<div class="banner_block">
<div>
Content
</div>
</div>
<div class="banner_block">
<div>
2nd piece of content
</div>
</div>
<div class="banner_block">
<div>
3rd piece of content
</div>
</div>
<div class="banner_block">
<div>
The 4th piece of content
</div>
</div>
</div>
When the screen reaches 958px I want the 3rd and 4th divs to drop below the 1st and 2nd, using a simple media query: #media all and (max-width: 958px) {
this should work.
#media (max-width: 958px) {
.small_banners .banner_block{
width:50% !important;
}
}
Kishan's method does indeed work if implemented correctly! Here's a fiddle that illustrates using the css max-width property to change the width of the 4 .banner_block elements depending on the screen width.
https://jsfiddle.net/evc670st/1/
Note elements with class banner_block use display:block and float:left to stack horizontally. If you don't want to float these elements, you can use display: inline-block, but make sure there is no whitespace in between your html markup.
Source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
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>