I'm trying to implement relative width columns based on the oocss framework. In order to add a gutter in between the columns I added an inner div in between the columns and their content.
The problem is that I end up with columns of unequal width...
I could avoid this by having the same padding for the first and last columns but since I want to nest columns it would create a shift on the right and the left...
Here is a fiddle:
http://jsfiddle.net/WxPSm/2/
Any idea welcomed!
Thanks
.unit > .content:first-child {
padding: 0 2em;
}
The problem is with your inner .content divs. The middle column has padding being applied on both sides where as the left column only has padding on the right and the right column has only padding on the left.
The outer unit divs are all the same size. Using firebug to inspect the elements highlights the padding very well if you need a visual.
Related
I'm confused about this part of code in the source code of bootstrap 3.3.5
/*line 1585 - 1590*/
.container {
padding-right: 15px;
padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
margin-right: -15px;
margin-left: -15px;
}
what are they used for?
-------------------------------
Thanks guys!
This is my opinion after reading your answers：
1.Add padding to the .container makes the content of .container away from the boudary;
2.But this means now the first/last col is 2 paddings away from the boundary,not so nice. So add .row negative margin to streach out it to the boundary.
Am I right?
btw,I asked this question because I dnt see the difference whether I delete these two rules or not.
Generally, containers as it states, adds padding on left and right so that content doesn't go right to the edge of the screen, making it useable for mobiles and easier to read.
When using columns, these add padding left and right, which can appear 'out of alignment' against the rest of the content, so you can wrap those in a row, using negative margins to bring that padding back in line with the rest of the content.
Again, this is to make it appear more aligned and clean.
From the Bootstrap Documentation (http://getbootstrap.com/css/#grid) :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use
rows to create horizontal groups of columns.
Content should be placed
within columns, and only columns may be immediate children of rows.
Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don’t put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.
The Bootstrap row uses negative margins to counteract the padding of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. This is important for responsive designs to ensure even spacing since the columns may wrap or stack vertically (changing the number of columns displayed in each row).
The same is also true in Bootstrap 4.
Also see:
Bootstrap Rows and Columns - Do I need to use row?
How the Bootstrap grid works
Bootstrap columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.
I have a simple 2 column layout within a centered background div.
The two columns are inside a larger div which is centered in the page. The issue is that the right column may be 1-2 pixels out and will be pushed to the bottom of the first div. How can I stop this from happening? I would prefer the second column to push outside to the right of the surrounding div.
A couple of options. You can float the left column left and the right column right. (If you do that, give the container overflow: hidden so that it wraps around the columns, and also make sure the combined widths of the columns are a bit less that the width of the container, to prevent the problem you are having and also to create a space between the two columns.)
Another option is not to float the main content column but instead (assuming it's the right column) to give it a large left margin that is slightly wider than the width of the left column. Then float the left column and just make sure it comes before the right column in the HTML.
there are other methods still, but these are perhaps the two most common.
It would be good to see your page code if more advice is needed.
The reason why the second column aligned bottom of the first column is because the sum for both column widths have exceed the size of that container, or maybe because you didn't applying floats (left/right) to that columns.
I would prefer the second column to push outside to the right of the
surrounding div
That means you want to put the column out from its container. You can apply negative value to achieve this.
Example:
.right{
position:relative; /* apply position relative */
right:-20px; /* out from the container by 20px on right */
}
Have a look at here http://jsfiddle.net/qiqiabaziz/RseAp.
I have a two column layout with a parent div (container) and the two column divs inside. The left column is floated left with a width and the right column has a margin to the left which is the width of the left floated div + 20px. I want this second column to take up the rest of the width provided by the container.
The problem is that floated content placed in the second column and then cleared lower down appears under the first column, a white space appears that's the same height as the floated column. So in the screen shot the < p > tags would be floated left with the second clearing the first as an example.
How can this be fixed? I've included a link to an image as reference. I've used this technique before without problems so I'm not sure what's gone wrong.
Image of problem including CSS in use
Thanks for looking
In the jsfiddle example below, I'd like the left column (#left) and the right hand columns (#right) to vertically align to the middle of the middle column (#middle). The height of the middle column (#middle) can vary.
This is for mobile devices, hence the use of
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
This part seems to work as required on screen resize.
Can this be achieved using CSS only (no javascript)?
See: http://jsfiddle.net/TGsdg/4/
Only way to do this is to use display:table(-cell) with table-layout:fixed. This will only work, however, if your right & left colums can have a fixed width:
http://jsfiddle.net/TGsdg/7/
I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.