I'm not using SASS, I'm using CSS. How can I remove the left padding from the right div? I want to remove the left padding only for when it's showing the large size column, if its size is smaller than the large size, I want it to stay using the left-padding (for mobile purposes).
example http://nsae01.casimages.net/img/2014/02/28/140228050513402376.jpg
Have you tried
.row.collapse?
What if you set a class for all sibling containers (i.e. columns) and set:
DIV.myColumnClass:first-child {
padding: 0px 20px; /* left and right padding */
}
DIV.myColumnClass {
padding: 0px 20px 0px 0px; /* right padding */
}
DIV.myColumnClass:last-child {
padding: 0px;
}
It's somewhat different: the first column will have left and right padding, the other columns just the right one, the last one no left or right padding.
.row.collapse makes margin equal to 0 not padding
Related
I am trying to use CSS3 columns to order some divs top to bottom then left to right. It seems to work pretty well but I have this one issue as shown in the image below. I give each of the divs a background and when I adjust the height of my window, instead of moving the entire background in one block as I would like, it progressively adds it, separating the background between two columns. This looks REALLY bad. I was wondering if there was a way to preserve the background of my divs so that as soon as the window becomes too small to accommodate even one pixel-height of a div, it moves the entire div to the next column.
Secondly, I would like to center the column(s) on the page with regard to the window size. I want this to work in Chrome (any recent version), Firefox (Any recent version), and IE 10.
You can fiddle here: http://jsfiddle.net/eE3z6/
#mainContent /* The containing div */
{
position: absolute;
top: 50px;
bottom: 50px;
margin: 10px;
column-width: 400px;
-webkit-column-width: 400px;
-moz-column-width: 400px;
}
.blockData /* The divs inside are all of this class */
{
position: relative;
width: 380px;
height: 30px;
padding: 4px;
margin: 0px 0px 10px 0;
border: 4px outset grey;
background: lightgrey;
}
Just add -webkit-column-break-inside : avoid; and display : inline-block for .blockData
Demo at : http://jsfiddle.net/eE3z6/4/
I thought I answered this yesterday. You need to take the float:left off of the .blackData and .listData styles and add a padding-bottom to your .listData style. 20px seems to work. The columns is checking the content (not the background) when deciding what to send to the next column and by adding padding to the bottom of the .listData you are making the content the same size as the background.
Also, on your jsfiddle you have .blockData style in there 2 times, so you need to take one of them out.
If you want to make it so that the columns will center on the main content div you will need to take off the position:absolute style from #mainContent and change .blockData margin from 5px 0px to 5px auto. By adding the auto to margin you will automatically center the content. I would also suggest taking the margin off the top of .blockData and only putting it on the bottom, so that all the columns will align to the top.
Now, when you take off the absolute positioning from #mainContent you will be able to center the blocks, but it will not readjust and send one block to the next column, but will even out the number of blocks in each column (i.e. instead of having 7 in the first and 1 in the second it will have 4 in the first and 4 in the second). It really depends on how you want it to be displayed.
I also, fixed up your jsfiddle. just turn position: absolute off and on for #mainContent and you'll see what I'm talking about.
EDIT:
instead of using-padding bottom to keep from cutting off each background you can use display: inline-block on the .blockData (this is similar to column-break-inside: avoid in this case but works on all browsers).
How come in this example, http://jsfiddle.net/eVdFH/ the divs don't align?
And what do I need to do in order to make them align in the center?
Theoretically for the "navigation" it should be set to center, set width of 600px, then moved left 300px so it is in the center
Why don't they align in the center then?
Should be:
#navigation {
margin-left: -322.5px;
}
Because you have padding: 20px; and border: 2.5px on that element.
I am sure this has been covered but I'm not sure what to search for.
I have 2 divs inside of 1 div. The 2 inner divs I float:left so there are 2 columns.
The first div is of class .username. The second div is of class .commentText. The outer div is called .comment:
.comment{
border: 0px;
clear: both;
}
.commentText, .username {
float:left;
}
However if the sum of the content of the 2 inner divs is greater than the width of the outer div, then the second inner div drops below the 1st inner div.
For example: in the picture below the timestamps are in username div. The comment is in commentText div. Notice the bottom comment bumps below the timestamp.
What I get:
What I want:
What I would like is for the commentText on the bottom comment to maintain the width that it would be if it were only 1 line and just grow vertically. Also note that the .username div in each comment has different widths.
THANKS!
EDIT:
I just found a decent solution in which I use max-width: 20% for .username and max-width: 79% for .commentText, but the problem with this is I don't want to limit the width of the username div. and if the username is short and the comment is long, then it doesn't fill all the way to the right side of the outer div.
I understand it isn't cross compatible on all browsers from all epochs but #bybe gave me a suggestion with a fiddle to use display:table-cell. This works great.
.commentText, .username {
display:table-cell;
margin:0px 0px 10px 0px;
}
.username {
padding: 0px 15px 0px 0px;
white-space:nowrap;
}
I'm new to css and stuck and can't figure out what I am doing wrong. But I would like to have the foot show as three columns. If you look at the image layout and notice the footer has three columns well that's the i'm trying to achieve. Also the footer dotted lines show past the layout.
Here is my layout: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Here is the working site: http://www.gdisinc.com/barker/default.php#
Could you tell me what I have to do to fix it. Let me know if you have any questions?
The reason why the third <ul> goes down is because you have an extra 1px of border (border-right: 1px dotted #FFFFFF;).
The way you did it was having a 900px container and divide it into 3 columns. That's correct.
But once you added an extra border-right: 1px dotted #FFFFFF;, the column width become 301px (300px width + 1px border = 301px).
To solve this, either you make change the container size into 903px. Or you reduce the width size into 299px.
The other problem about
the footer dotted lines show past the layout.
Be careful with padding. When you add padding inside a div. It is counted as extra width.
Some part of your CSS for <ul> is:
width:902px;
padding:20px;
The total width is 902px (width) + 20px (left padding) + 20px (right padding) = **942px**
To fix this, you change the padding at your <ul> by using padding:20px 0px;. The first value represents top & bottom padding, the second value represents left & right padding.
2 solutions
increase width of the content
.content {
width: 903px;
}
or remove border of the last ul in content
.content ul:last-child {
border-right: 0;
}
add this css
.content {
padding:20px 0;
}
#footer ul {
margin: 0 0 0 20px;
width: 275px;
height:120px;
}
also add a class to last ul and add this
.last {
border:none;
}
better do this as suggested by Emrah
.content ul:last-child {
border-right: 0;
}
Your columns don't fit enough in a parent. Set style="border:none;" for the last column.
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow