We have 3 columns (someone would want more maybe)
Lets say I want 30px distance between them.
That would mean I need to create 3 different styles :
First column : margin-right:15px
Center column : margin-right:15px;margin-left:15px;
Last column : margin-left:15px;
Maybe its not quite complicated but its quite no-comfortable, especially when needed for some wordpress etc. where end-user may not have a HTML background.
Here is a fiddle.
Is it possible to achieve this in a simple manner ?
You could have
HTML
<div class="margin-right">
<div class="margin-left margin-right">
<div class="margin-left">
CSS
.margin-left { margin-left: 15px }
.margin-right { margin-right: 15px }
there's an easier solution ( jsFiddle ) that does not require you to use 2 classes which is:
.col-gutter {
padding-right: 20px;
}
.col-gutter:last-of-type {
padding-right: 0;
}
you can just set the gutter size to whatever size you need using one single class
Update ( IE8 )
if you'd want to support at least IE8 you could use this instead:
.col-gutter {
padding-left: 20px;
}
.col-gutter:first-child {
padding-left: 0;
}
You could always use the following method (for 3 column layout):
.onethird {
width: 30%;
margin-left: 5%;
float: left;
}
.onethird:first-child {
float: left;
margin-left: 0;
}
.onethird.third {
float: right;
}
Just wrap it in a container, and make sure you clear the floats.
Here is an update to your fiddle : http://jsfiddle.net/kFeFj/23/
Try negative margins on a container element
http://jsfiddle.net/5JZGt/ (this demo shows multiple boxes)
Some HTML:
<div class="container">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
The CSS:
.container {
margin: -10px 0 0 -10px;
}
.container .child {
width: 100px;
height: 100px;
background: red;
margin: 10px 0 0 10px;
float: left;
}
You can do away with the .child class and just reference the div or whatever element you're using.
Related
When I place two different divs side by side with a sidebar, and have only margin to the right on the first one (that is on the left). And the right one don't have one.
How do I create a good structure so I don't have to manually add style="margin:0" to the right HTML element?
To demonstrate this I have created this illustration:
You can use nth-child(odd) to target every odd item in the order of your items.
Since you didn't provide any actual code example, I have put together a structure I felt appropriate for such a design.
Here's an example I knocked up: http://codepen.io/michaelpumo/pen/OMgEKp
In the CodePen, I am using Jade for HTML and SCSS for the CSS. I recommend using them, but if you want the compiled code, it's below.
HTML
<div class="grid">
<div class="grid__left">
<div class="grid__hero"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
<div class="grid__right">
<div class="grid__sidebar"></div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
padding-top: 10px;
}
.grid {
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.grid__left, .grid__right {
float: left;
}
.grid__left {
width: 400px;
}
.grid__right {
width: 200px;
padding-left: 10px;
}
.grid__hero, .grid__item, .grid__sidebar {
background: #000;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__item {
float: left;
clear: none;
width: 195px;
height: 200px;
margin: 0 10px 10px 0;
}
.grid__item:nth-child(odd) {
margin-right: 0;
}
.grid__sidebar {
width: 100%;
height: 410px;
}
Hope it makes sense. The real meat of the matter is on the .grid__item divs, that have a margin right, but this being removed for every odd one, which results in the effect I think you're after.
In any case, it looks like you're after a grid system. There are many out there; most popular being Bootstrap. I strongly recommend using one of them: http://getbootstrap.com
Personally, I use a SCSS based grid called Neat: http://neat.bourbon.io/
I am having a bit of a hard time trying to get the 3 column layout sorted.
This is my current HTML and css layout
<div class="row">
<div class="col">C1</div>
<div class="col">C2</div>
<div class="col">C3</div>
</div>
The CSS is as follows:
.row {
width: 964px;
}
.row:last-child {
margin: 0;
}
.row .col {
width: 33.33%
float: left;
margin-bottom: 20px;
margin-right: 10px;
}
The columns are basically of equal width using percentages of 33.33%. Problem I have is that while the columns show up within the the row container, on the last column, there is a gap on the right margin. Increasing the right margin pushes the last column to the next line.
How can I line up the columns so that they keep the same width, but for the first and last columns to not to have any margins (ie. no left margin on the first column and no right margin on the 3rd column).... Any ideas?
Thank you..
.row .col:last-child
{
margin-right:0;
}
this will do. but, don't forget to include it after '.row.col' style
Use % instead of px here margin-right: 10px;
.col{
width: 32%;
margin-right: 2%;
}
.col:last-child{
margin-right: 0%;
}
you should use
.row{
display:table;
}
.col{
display:table-cell;
}
EXAMPLE:
.row{
display:table;
width:100%;
}
.col{
border:1px solid #000;
display:table-cell;
width:33%;
}
FIDDLE DEMO
If your row is a fixed width (964px) then can't you just calculate the column widths that you want and put the margin as a left and right on column two?
Also, 964 doesn't divide by three so it's a bit of an odd choice - you'll always end up with rounding issues - I've changed it to 963px for the example below.
e.g.
<div class="row">
<div class="col">C1</div>
<div class="col middle">C2</div>
<div class="col">C3</div>
</div>
with CSS:
.row .col {
width: 321px;
float: left;
margin-bottom: 20px;
}
.row .middle {
margin-left: 10px;
margin-right: 10px;
}
Thanks for the answers guys, I ended up having to change the padding amount that my main site container was using. Once I had a width of 970px, I just borrowed a bit of css from Bootstrap to get the layout to display correctly.
End result being:
.row {
margin-right: -15px;
margin-left: -15px;
}
.col {
float: left;
width: 33.33333333%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
That lines everything up perfect for me.
I want a layout with three boxes (two optional) like this:
[side box 1] [ main content
[side box 2] . main content ]
or
[ main content spans 100% if side boxes aren't provided ]
I want the main content box to span the entire height and width available in #load (minus margins) except if the side boxes are there, then I want it to only span up until those boxes (and their right margin).
My CSS:
#load {
margin: 10px;
height: 100%;
min-width: 1080px;
}
#primary,#secondaryOne,#secondaryTwo {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #ccc;
}
#primary {
float: right;
height: inherit;
width: 75%;
height:500px;
background:red;
}
#secondaryOne,#secondaryTwo {
min-width: 250px;
max-width: 300px;
height: 220px;
margin-right: 10px;
width: 20%;
clear:left;
float:left;
}
#secondaryTwo {
margin-top: 10px;
}
Simple HTML
<div id='load'>
<div id='primary'></div>
<div id='secondaryOne'></div>
<div id='secondaryTwo'></div>
</div>
JSFiddle
Problems
*SOLVED*Making #primary span the entire width if the sideboxes are missing.
*SOLVED*Is there a way to line the two sideboxes (#secondaryOne,#secondaryTwo) on the left side of #primary without nesting them in a separate div? If I use float: left on them, they line side by side, if I don't float them, the #primary generates below them, not beside them.
Solutions
Problem #1 was solved by joeytje50 using the secondary + primary tags and placing the secondary side boxes before the primary in HTML.
Problem #2 was solved in more than one way. The way I chose so that the secondary tags were placed together and before the primary was by NoobEditor using clear: left and a negative margin-top.
The solution can be found at: http://jsfiddle.net/v4cvv/67/
The main part of the solution is:
#primary {
width: 100%;
}
#secondaryOne + #primary, #secondaryTwo + #primary {
margin-top: -221px;
width: 75%;
}
Alternate Solution
One problem I found with the above solution, is it requires the two boxes and them to be the same height. A solution around this is by grouping the boxes in their own div. This solution is:
HTML
<div id='load'>
<div id="sideboxes">
<div id="boxOne" class="box"></div>
<div id="boxTwo" class="box"></div>
<div id="boxThree" class="box"></div>
</div>
<div id="primary" class="box"></div>
</div>
CSS
.box {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #fff;
}
#primary {
float: right;
display:block;
height: 97%;
width: 100%;
}
#sideboxes + #primary {
width: 75%;
}
#sideboxes {
float: left;
height: 97%;
width: 23%;
margin-right: 10px;
}
#sideboxes .box {
float: left;
height: 220px;
margin-bottom: 10px;
width: 100%;
}
The alternate solution no longer requires clear and can be extended for other uses. You may now also have 1, 2, 3, or however many boxes you want in the sideboxes div.
Thanks all for their help.
To answer your question about the primary box being 100% width when the secondary boxes are not there, you could do the following:
#primary {width:100%;}
.secondary + #primary {width:75%;}
If you put that CSS code at the bottom of your stylesheet, and then put the primary div tag after your first secondary div tag, then it'll by default be 100% wide, unless there's an element that has class="secondary". This won't change anything about the position the div is rendered, but it will fix your problem.
Alternatively, if your secondary divs are possibly hidden instead of not being there, you could do this:
#primary, .secondary.hidden + #primary {width:100%;}
.secondary + #primary {width:75%;}
That is, assuming you hide the secondary tabs via a class such as .hidden.
Here is a working version that becomes 100% width when the secondaries are removed, but still is 75% width when there is a .secondary element before it.
Keeping your HTML markup smae, here is the solution for your problem : demo
CSS
html.body {
height:100%;
}
#load {
margin: 10px;
height: 100%;
width:100%;
}
#primary, #secondaryOne, #secondaryTwo {
border-radius: 8px;
background: #f5f5f5;
border: 1px solid #ccc;
}
#primary {
float: right;
display:block;
height: 100%;
max-width:100%;;
width: 68%;
margin-top:-70%; /* this is the key */
}
#secondaryOne, #secondaryTwo {
width:30%;
height: 220px;
margin-right: 10px;
}
#secondaryTwo {
margin-top: 10px;
}
Problem #1
To get your #primary div to adapt it's width, you can use jquery to verify the presence of the .secondary divs and to set the an other width to the #primary div.
With .secondary demo
without .secondary demo
JQUERY:
if ($('.secondary').length){
$('#primary').css('width', '75%');
}
Problem #2
You can use clear:left; and by changing the order of the divs in your html markup you will have your 2 divs stacked on the left and your content div on the right.
FIDDLE
HTML:
<div id='load'>
<div id='primary'></div>
<div id='secondaryOne' class="secondary"></div>
<div id='secondaryTwo' class="secondary"></div>
</div>
CSS :
.secondary{
clear:left;
float:left;
}
Try
#primary {
min-width:75%;
max-width:100%;
}
http://jsfiddle.net/Paramasivan/v4cvv/65/
I am trying to do a hide / reveal using javascript and css and my divs are stacking rather than lining up side by side. i have set a width and floats... i cant figure out what's going on. any help is greatly appreciated.
#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#1a {
width: 300px;
float: left;
margin:10px
background-color: #000;
}
#1b {
width: 400px;
margin: 10px;
background-color: #000;
}
and the html:
<div id="container">
<div id="1b" class="hidden">
Module Details:
My First Page
</div>
<div id="1a">
01
</div>
i've been messing with it a lot, and now the second div is in the middle of the first... so here is a link if that's helpful too:
http://www.amandasmithsf.com/m14_SMITH_demo/test.html
Update
Inspecting your CSS in Firebug, I noticed that it wasn't being applied, then I saw why -- HTML IDs should not start with a number (or at least, not if you want them to work the CSS # selector; it turns out that in HTML5 they decided to start allowing IDs beginning with numbers, but you'll have to use a different strategy to select them with CSS: http://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/).
Starting the IDs with letters instead of numbers made it work:
<style>
.hidden {display:none}
#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#b1 {
float: left;
width: 300px;
margin:10px;
background-color: #000;
}
#a1 {
float:left;
width: 10px;
margin: 10px;
background-color: #000;
}
</style>
<script>
function unhide(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<div id="container">
<div id="b1" class="hidden">
Module Details:
My First Page
</div>
<div id="a1">
01
</div>
</div>
Original Answer
I think you just need to add float: left; to #1b.
Or, if for some reason you really only wanted to assign float: left; to one of them, it would need to be #1b - the floated element needs to come before the non-floated element next to which you want it to display.
Take this HTML:
<div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
</div>
With the companion CSS:
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px;
background: red;
}
The result of this is four blocks, which have between them 2 pixels of space (1px from the right margin of the left block and 1px from the left margin of the right block).
Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.
This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting margin-left to 1 pixel etc.
There are multiple ways to this
One of them is
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px 1px 1px 0;
background: red;
}
div.block:last-child {
margin: 1px 0 1px 0;
}
Another is
div.block+div.block { margin-left: 1px; }
You can check the demo of both way here
How about using the CSS selector :first-child and :last-child to alter the first and last <div>?
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 2px 1px 2px 0;
background: red;
}
div.block:first-child {
margin-left: 2px;
}
div.block:last-child {
margin-right: 2px;
}
If you can alter the markup itself, then I guess we can have a cross browser compatible solution:
<div class="block"> <div class="block_2"></div> </div>
and then apply the css like:
div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}
Assign a class for last block called 'last'.
The set margin-right of every block to 1px.
Set margin-right of block that has last class to 0.
.block.last { margin-right: 0px; }
Pseudo selectors like forst-child and last-child are not well supported so I think this is the best option you have.