Please have a look at http://jsfiddle.net/kV7Uq/1/
.productList div.grid:nth-child(4n+5){
clear:left;
}
What I'm trying to achieve is to create a 4 column grid. The above code used in the fiddle seems to be just fine - but if you look at that fiddle there is no 4 column grid.
<div class="pageNav"></div>
<div class="pageHeading"></div>
The above two divs that are also child divs of the container div, and located prior to the grid divs are causing a conflict. If those two divs are removed, the grid comes out just fine. I'm not sure if this is even fixable, please help - thank you.
Just offset it by 2 to compensate for those divs. Instead of +5, use +3.
.productList div.grid:nth-child(4n+3){
clear:left;
}
http://jsfiddle.net/kV7Uq/2/
If you don't want the very first box to have the clear: left then it would be +7.
Related
I have the following styles defined for two divs inside a containing div. I want to float the first inner div left and the second inner div right. I also want to make them margin left or margin right respectively by 15px. The problem is I want to keep my 'float left/float right' styles clean of the margin specification.
I want to be able to specify the class and add to it like so:
#termsPageButtonContainerCheckbox.leftAlignedControl {
margin-left: 15px;
}
The problem is, the margin-left will only be respected when i place it in the float style:
.leftAlignedControl {
float: left;
}
Here is a demo i set up on JSFiddle: [Removed by OP]
You are not targeting the id correctly. You either need to change the HTML id to termsPageButtonContainerCheckbox or change the CSS to #termsPageForm:termsPageButtonContainerCheckbox
http://jsfiddle.net/c5or4hjg/1/
The button has 2 ID's, but only its only possible to give it one id and its not possible to use : in an id for as fas as i know. So it will work if you remove one of the 2 parts used (the one before or after :)
I am currently working on my own responsive grid with columns. I am currently using 12 columns and I give each column a multiplier of 100/12 and subtract a margin on each column. So I make each column a little bit smaller so I can fit in a margin-left and make gutters this way.
#for $i from 1 through $column-count {
.column-#{$i} {
width: (((100 + $gutter-width) / $column-count) * $i) - $gutter-width;
}
}
This leaves me with something like this:
.column-1 {
width: 7.41667%; }
.column-2 {
width: 15.83333%; }
.column-3 {
width: 24.25%; }
etc.
This way I can set a margin-left for each column and just remove the very first margin-left in each row with the first:child selector
Twitter bootstrap however uses a column grid where all columns touch eachother and they use padding to kind of fake column gutters. However I tried some fooling around with bootstrap and you run into a problem when you actually set like a background for a column. Immediately you can see that the columns will touch. How do people prevent this from happening?
I guess using another element would inside the column would help? This however would get a bit messier than I would like probably.
I am asking this because I am looking for a solution since my grid can only go from default columns to 100% width columns when you downsize it.
grid: http://titan.ravenwebdesign.nl/
I would like to be able to add something like .mobile-column-6 to certain grid columns in a manner that bootstrap has with it's grid tiers of classes.
This would be helpful in for example having 2 columns next to each other when in downsized view. Except I'm currently using rows and every first child of my row has the margin removed. So it would't work like this:
<div class="row">
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
</div><!-- .row -->
Because of my responsive design which says that the first column will have it's margin removed I can't simply turn it into a 2 columns next to eachother design.
Hopefully somebody can help me out here although I understand this problem is extremely hard for me to explain like this.
I´m creating a page with Bootstrap and I need to make 4 columns leaving a space between each column of 5px!
I followed this tutorial ( http://andre-abt.com/2013/11/26/how-to-use-the-bootstrap-3-grid-system-with-column-margins/
). But for me doesn't work fine because if a put a link inside of the column to wrap all column is also possible make click outside of the column. (It's possible click in that 5px of margin).
jsfiddle.net/andresgl/2f7Lhmwd/ (Conferences, Summits, Events)
I hope some can help me.
Thanks!
Overcomplicated example for what you want to achieve, but if you want to keep it as it is add
.item-menu {
position:relative;
}
http://jsfiddle.net/2f7Lhmwd/2/
a{ margin:0;padding:0; }
This will remove all padding and margins from the anchor tag.
I have following code:
<div class='parent'>
<div class='left-child"'></div>
<div class="right-child"></div>
</div>
What I want to do is, if height of "left-child" is going to increase then height of "right-child" is also going to increase.
This might be a simple question as I'have less knowledge of html and css.
I don't want to use any of the java script code.
I want only css and html code for this.
Thanks.
Have a look at:
Demo
The most cross-browsers solution is styling your divs with table properties. This is also the least semantic solution.
.parent{
display:table;
}
.parent > div {
display:table-cell;
}
DEMO
You can create the illusion of the left and right child having the same height, by adding the background you want to use in the right column to .parent. I've added an example:
http://jsfiddle.net/3MCzm/
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
Create two divs inside your main div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
#left { float:left }
#right { float:right }
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
You can change the display CSS property on the divs. The best value to use would be table-cell; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
You can make the divs float to the left in their container.
You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
You can switch to span.
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
This should address the question in most instances
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.