I've been working on a web application using Bootstrap, and have come across odd behaviour in my columns that I cannot seem to figure out.
Most of the CSS I'm using is just Twitter bootstrap defaults. I've attached screenshots of the HTML structure and the problem itself.
The Issue
It appears that the first div in my main-content div is expanding to match the size of the sidebar, which makes no sense to me.
Also upon further investigation it appears that each child within my #main-content div contains the following CSS, which causes the issue. How might I circumvent it?
.row-fluid:after {
clear: both;
}
.row-fluid:before, .row-fluid:after {
content: "";
display: table;
}
.row-fluid:after {
clear: both;
}
Here is the actual page: http://d.titanlabs.ca/ai2/test.html
May be i know the reason just give float to your #main-content also. write like this:
#main-content {
float:left;
margin-left: 45px;
padding: 25px 0;
width:860px;
}
UPDATED
#main-content{
margin-left: 45px;
overflow:hidden;
}
Related
Ok, I'm having some more fun with the ::after feature. Here are 2 examples:
With issue: http://codepen.io/anon/pen/zrBJRO
Works: http://codepen.io/anon/pen/LGZJQN
The first example, I am adding the .clearfix class to the div's I want to apply it to:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
However, this doesn't work - and the red bar (which should be showing under the 3rd .link-listing div), simply shows at the top of the page.
On the other hand, if you look at the 2nd example ( http://codepen.io/anon/pen/LGZJQN ) , you can see that this DOES work ... but I've had to go back to using horrible divs to clear them:
<div style="clear:both"></div>
The idea of this exercise, is to try and get rid of as many DOM elements as possible (each link we currently have 2 "clear" divs (sometimes 4, depending on if there is an "offer" on the listing as well), and when there are 50 links per page - thats a heck of a lot of DOM elements we can remove, if this will work :))
I think that the use of floats here is exagerated. Removing the floats you have the same behaviour and you don't need to put clearfixes anymore. Floats are for floating elements, not for layouts.
https://jsfiddle.net/j9oecqp3/
Simply change float for display block
.link-listing {
display:block; /* before was float:left;
}
I am aiming to create a simple image grid using css floats with certain 'featured' blocks which are double the size of the others.
I have it mostly working fine however when a block is featured I'm unable to get the next block to fit underneath it correctly.
I've included a jsfiddle to make the problem much clearer. You will see that at the bottom of the output there is a block on a row of it's own to the right of the featured element (with the class 'problem'). I would like this to instead be on the left of the featured block and on the same row as it is currently so that I can add another 2 blocks to create a completed grid but I can't work out how.
CSS:
.grid {
ul {
padding: 0;
margin: 0;
width: 100%;
li {
width: 20%;
float: left;
list-style: none;
box-sizing: border-box;
white-space: nowrap;
list-style: none;
line-height: 0;
img {
width: 100%;
}
}
}
.featured {
width: 40%;
}
}
(Nested css is due to scss).
Full fiddle: Link
Any help is greatly appreciated.
Technically this is called Dynamic Grid Layout
As per your requirement you have to use jquery here because there is no solid solution available using only css and html.
There are ready made plugins available online.
You can see or download the demo from here:
Reference 1:
Reference 2:
hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.
but my default one which i haven't set is displayed like this.
here is my sass code.
li
{
width:20%;
padding: 2px;
float:left;
#include media($xl-desktop) { // As defined in _grid-settings.scss
width:10%;
}
#include media($mobile) { // As defined in _grid-settings.scss
width:33.3333%;
}
}
Please tell me where am i doing it wrong.
thanks.
Here is my Demo
Demo Link
can you try this layout?
to make images responsive you need to add width: 100% (you did the exact oppsite);
Make an image responsive - simplest way
http://jsfiddle.net/95EfW/
css:
ul{
list-style: none;
}
li{
float: left;
padding:0;
margin:0;
width: 20%;
padding: 4px;
}
img{
width: 100%;
height: 100%;
}
thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago
This will prevent the floats to drop as you clear each row.
.galleryList li:nth-child(6n+6) {
clear: left;
}
But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...
I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?
Site is here
It's set up using two classes, one inside the other
First one is called mainFoot:
.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}
Second is page-footer:
#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}
I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.
For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:
.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}
.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}
To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.
To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.
you need to change just this line please see below and put on your CSS and see result
.mainFoot
{
background-color:#184879 !important;
height:60px;
width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}
only change on .mainFoot , footer.span12 and #page-footer
Thanks,
I am having the hardest time trying to figure out this (should be) simple css:
Website is here:
http://mibsoftware.us/fct/index.php
I'm simply trying to get my #leftcolumn and #maincolumn to be inside the #content_container, yet whatever I'm doing isn't working at all. I'd like for the #content_container to be a dynamic height since the height of #leftcolumn and #maincolumn change depending on the page you are on.
From the framework of my css it should work fine, so I must be missing something in my .css file declaring these divs. Any help would be greatly appreciated, as this will be a great learning experience for me.
Set overflow:hidden on your #content_container.
Here is a nice resource to learn more about clearing floats and such.
You could also set .clearfix class on your #content_container and define it in CSS like this:
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}