I have a two column layout. If a certain screen size is met they break so that everything will be shown in one column. That is why the ordering of those elements is important to make sure that the proper elements are shown first when viewed with a smaller screen.
The issue with this set up is, that the second "to be made sticky" aside-element is not properly floating right, but instead some where in between.
see in action: http://jsfiddle.net/zn3qz/
.main {
width: 60%;
margin-right: 5%;
float: left;
}
aside {
width: 35%;
float: right;
}
<section class="main">Header</section>
<aside>picture</aside>
<aside>to be made sticky</aside>
<section class="main">List of things</section>
Depending on your requirements, here's another variation: http://jsfiddle.net/panchroma/TtT6h/
The only real change I've made is to the CSS where I've added
aside{
clear:right;
}
This ensures that the second aside clears the first aside and can slide completely to the right.
Hope this helps!
For something like this jquery is very help full. You can get the window width and based on that width you can edit the css to make one column or two.
Related
I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.
I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.
I don't want to have this empty space and want the cards to automatically align themselves to the center.
I've also divided the columns to 10 rows but still, there was no change.
Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.
You can also see it yourself from: http://sagtekin.com/letseat/maintest.php
Thank you very much for your valuable help.
I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.
In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.
Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.
.container {
text-align: center;
}
#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}
#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}
img {
float: left;
}
Here is a Fiddle
https://jsfiddle.net/gward90/oygyj9qd/
You have several times id card, use class.
Don't set the width of the column divs, let bootstrap do it. (Fixed size and responsive design don't mix too well.)
Use the img tag unless you really want the image in the background and then put something over it which dictates the size.
If you do it like that, then the container will behave as you expect it.
Recently I realized there was a huge error with the display in my website and it does not work for all devices. I always thought using percentages as a way to represent width and height was a good idea until I realized it can mess up the way a div is intended to look. So I have became aware of min-width and max-width as a way to fix this. However, after having said this, I have a new problem.
http://1v1lb.com/example.html
Here is an example of how my layout looks. The only problem is, the bigger my page gets, the more room in between the left and right divs there are. I am trying to make it to where my left column fills in that extra space. Here is my code
#container {
min-width: 960px;
}
#right {
width: 300px;
display: inline-block;
float: right;
}
#left {
min-width: 640px;
margin-right: 20px;
float: left;
display: inline-block;
}
As you can see, I gave it a min-width of 960 because I read on previous questions that's the default amount that should be given. But for my left column I have only gave it a min-width, and I do not know what to set the width to in order to make it automatically fill in that space as much as possible without pushing my other div out of the way.
Please add max-width:100% important on #container remove those marked properties http://prntscr.com/6ek8uf
I am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/
I have been trying to figure this out, but am unable. I am looking for a way (through coding html/css) to "float" a div element up as the browser window's width is decreased.
Here is the browser window at full width with the div elements side by side.
After resizing (decreasing browser window width), I'd like for the 2nd div element to "float" above the 1st div element.
I would appreciate any help. Thank you.
UPDATE: First, thank you all for the help. After reading/trying recommendations, I am looking for a solution that is functional across all browsers. Also, the elements will be dynamic images. And, it doesn't have to be strictly limited to html/css, but the most simplistic implementation is always appreciated! :) Thank you again for your input and help.
Just place the second div first in your code like this:
<div id="second"></div>
<div id="first"></div>
And add float: left; attribute to the first div with CSS. You won't need jQuery for that:
http://jsbin.com/ERutocO/1/
You need to put number 2 in front of number 1 in your html code, then use float: right on both of them.
http://jsfiddle.net/4sCrQ/
If you want only CSS answer then you will need to use CSS3's media queries which word depending on the screen type and its size!
Use this :
#media only screen and (max-width: 900px;) { // screen size 900px
// if screen size 900px then position them here as
.div1 { // first div
margin: 10%; // margin
}
.div2 { // second div
// whatever property
}
}
And when the size decreases to lets say 500px width then
#media only screen and (max-width: 500px) { // if screen size is 500px
.div1 { // first div
// position it above,
}
.div2 { // second div!
// position it below by using min-width attr, and by adding paddings..
}
}
Good luck!
For more: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries (Mozilla Developer's Network)
Float the blue div left, the yellow div right. Demo
#yellow {
float: right;
height: 30px;
width: 200px;
background: yellow;
}
#blue {
float: left;
height: 30px;
width: 200px;
background: blue;
}
Here is a demo
While making this example some answers where posted here, and they are almost simular to my, so excuse me for duplication, but here is another possible solution.
I've reorder the div's and add float: right; instead of left.
This is the website I'm having problems with: http://bgflirt.com
I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resized (width in percent). However, as you can see - the part where the content is refuses to align on the right of the menu, but is instead displayed below it. Can someone help me with this ?
For #content_wrap remove width:100% and float:left. This will make box to stretch to fill all available horizontal space.
You'll need to also clear floats in whatever way you prefer. E.g., add overflow: hidden; to #content_wrap.
This works for me in firebug.
BTW, since you use fixed-width graphics for header and footer (frame with those nice rounded corners), you can't really stretch them.
Try using something like this for your CSS:
.container {
position: relative;
}
.sidebar_wrap {
position: absolute;
top: 0;
left: 0;
width: 130px;
}
.content_wrap {
margin-left: 130px;
}
I believe that is much easier to work with than a float.
A couple of things.
First, get rid of the xhtml doctype and instead start using an html 4.01 strict doctype. xhtml, besides being on it's way out, has inconsistent rendering across a lot of browsers.
Second, this is MUCH easier to accomplish with a table. Just set the width of the table to 100% and the width of the first column to 130px. The layout engine will take care of sizing the other side. Incidentally, this will solve some of the other issues you're going to run into such as making both sides have the same height.
your #content_wrap div has a 100% width, like so it's impossible for it to float left when theres a menu with a 130px width...
You should make the menu's width in % if you really want to make the site resizable... something like
#sidebar_wrap{
width: 15%;
float: left;
}
#content_wrap{
width: 85%;
float: left;
}
note that the sum of the width can't be bigger than 100%, and you should take paddings and borders in consideration.