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.
Related
I know there's millions of questions like that, but no approach really helps me. First my code and my fiddle (very simplified because it's from GWT):
<div class="row">
<div class="inline minfirst">Password</div>
<div class="inline min">
<div class="inline"><input type="text" class="text pwd" /></div>
<div class="inline"><button class="toggleButton pwdToggle" /></div>
</div>
.row {
padding-top: 5px;
}
.inline {
display: table-cell;
vertical-align: middle;
}
.minfirst {
min-width: 200px;
}
.inline.minfirst {
font-size: 0.85em;
}
.min {
min-width: 380px;
}
.text {
border-radius: 22px;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
}
.pwdToggle {
text-align: right;
float: right;
margin-left: 30px;
}
.pwd {
height: 1.85em;
width: 100%;
font-size: 0.6em;
}
.toggleButton {
width: 65px;
height: 34px;
font-weight: bold;
}
What I want to achieve is that the div with the input inside takes up the remaining space of the div with classes "inline" and "min" and the input should take all space inside of the div. But what happens now is that the input is bigger than its parent div and that makes everything behave weird.
I hope you're well aware of CSS property box-sizing: border-box;.
you've given padding to your input field along with width:100% viz causing the extra height as well as width and i.e. why its bigger than its parent div.
Here JSFiddle
I've edited please check.
The general problem is that you have table-cells without a table.
If you define the outer .row as a fixed table with 100% width you are on your way.
I've created a fiddle
The new code for the .row is:
.row { display:table; table-layout: fixed; width:100%; }
Take a look :-)
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 get three columns on one line. It worked until I added some padding to the divs. I am using percentages for making it kinda responsive. The below is the CSS:
.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: 1%;
padding: 1%;
position: inherit;
}
.contentLine .last {
margin-right: 0;
}
Here is my fiddle
Did I make a mistake with the percentages?
Demo HERE
Use margin-right:.5%;
.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: .5%;
padding: 1%;
position: inherit;
}
and change last column div like this. because you are using class attribute two times and you can use class attribute only one time in a single tag.
Use
<div class="column last">
not<div class="column" class="last"> it is worng.
Reduce the width of your columns. With all the percentages and extra space added in, it all adds to over 100% which is why the third column will always be on the next line. Instead of 31%, try 30%.
Reduce the width of .column to 30%.
It currently goes to next line because, there are 3 boxes with width 31% (total 93%). They have padding (right and left) of 1% (so that totals upto 6%) and you have margin-right of 1% (which totals to 3%) and all together exceeds 100%.
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
}
I'm having a bit of a "moment" where I am stumped on an issue I thought should be pretty easy (and probably is, I'm just over complicating I'm sure).
I'm looking to have a div with multiple children div's; the children should automatically expand or contract based on the number there are (the site I'm working on is in a CMS that allows a user to add or remove items).
My issue is having the div's respect the min- and max-width declaration. I have a hunch that it could be something to do with them being float:left, but I've tried a few other variations with no luck.
My main objective is to get these columns to fill their space on one "row", up to 4 columns.
EDIT: I need to have these columns be a minimum width, as well as a maximum width. So if there are 3 child div's, they should all be wider than if there were 4 child div's.
Here is an example of my code: http://codepen.io/joe/full/IJvGp
HTML
<div class="sub cf">
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
<div class="col">
Column 3
</div>
<div class="col">
Column 4
</div>
</div>
</div>
CSS
.sub {
width: 670px;
background: #fff;
border: 10px solid #414042;
}
.sub .row {
padding: 0;
float: left;
width: 100%;
}
.sub .row .col {
min-width: 166px;
max-width: 222px;
width: 100%;
float: left;
border-right: 1px solid #D0D2D3;
margin: 0;
padding: 0;
}
.cf::before, .cf::after {
content: "";
display: table;
}
.cf::after {
clear: both;
}
With jquery you could dynamically set the column widths as a % based on the number of columns within the row.
var colWidth = (1 / $('.sub.cf .row').children().length * 100) + '%';
$('.sub.cf .col').outerWidth(colWidth);
working fiddle. Insert or remove more columns and rerun it to see how it works.
Removing the width:100%; on the .sub .row .col item made them appear in 4 columns.
Regardless it looks like you should be using a table instead of this approach.
CSS3 Solution
Remove the min and max widths on .col but add the box-sizing: border-box property to that. Then add the following code below the .col definition which yields the result in this fiddle:
.sub .row .col:nth-last-of-type(2),
.sub .row .col:nth-last-of-type(2) ~ .col
{
width: 50%;
}
.sub .row .col:nth-last-of-type(3),
.sub .row .col:nth-last-of-type(3) ~ .col
{
width: 33.3%;
}
.sub .row .col:nth-last-of-type(4),
.sub .row .col:nth-last-of-type(4) ~ .col
{
width: 25%;
}
You could try something like this:
HTML:
<div class="sub">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
.sub {
text-align: justify;
width: 670px;
background: #fff;
sborder: 10px solid #414042;
}
.sub div {
display: inline-block;
max-width: 166px;
min-height: 100px;
border-right: 1px solid #D0D2D3;
margin: 0;
padding: 0;
}
.sub:after {
content: '';
width: 100%;
display: inline-block;
}
The main problem here is width: 100% and max-width: 222px. With width: 100% you are making the children divs as big as you can. And because of max-width: 222px they all become 222px width. Your parent div is 670px width, so if you do the math: 222px * 4 = 888px. The children divs' total width is exceeding the parent's width, that's why it's pulling the last div down.
You can try:
Codepen
If you don't care much about supporting IE8- then ScottS solution is the best.
You have the following code.
max-width:222px;
Reduce it to some value so that it can be accomdated!
max-width:166px;
works for me!
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.