I've got a responsive 2 column layout going on. The first column is a fixed width, while the second one is using the css calc property to subtract certain pixels from its 100% width.
What I want the second column to do is to scroll horizontally, regardless of the screen size or width of it. I threw together a quick pen to illustrate what I'm trying to do: http://codepen.io/trevanhetzel/pen/nbdIt
As you can see, the second column has multiple .thing divs inside of it that are floated left and have a defined width. What I DON'T want is for these .thing divs to drop down to another line when they run out of room inside the second column.
How can this be achieved? I tried messing the overflow property, but I think I might need another container div with some different positioning properties or something. Any advice?
Here you go: http://codepen.io/seraphzz/pen/lutjb
The solution to this is:
Change .thing from float: left; to display: inline-block;. This keeps those elements in line, but also keeps them in flow so the parent element acknowledges it has children
Give section a white-space: nowrap; property. This prevents the .thing elements from going to another line.
Give section an overflow-x: auto property. This allows the div to be scrolled horizontally, but hides the scrollbar if there are not enough children to need it.
Lastly, give section a font-size: 0 property. By default, elements that are display: inline-block are treated like text, and are thus given an automatic margin. Setting font-size: 0 on the parent of those elements removes that automatic margin, allowing you to set the margin as you like. Remember, you will need to manually set the font-size of these child items if they contain text.
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 div element that is supposed to be a horizontal main menu. I used a ul and its lis as menu items. lis are inline-block so they make a horizontal menu. I set the div's width to 100 percent but I didn't set any height for the div, so its height is defined by its paddings, borders and contents. Now I want to fix its height to whatever it is (without directly defining), so I can use overflow to hide overflowed menu items on smaller screen sizes. I think it would be good for responsive designs. Can it be done with pure CSS?
Currently, as I make the browser's width smaller, menu items pile up, make more than 1 row of menu items and force the div's height to fit. I want to see only the first row of menu items.
You can ensure the contents of the div stay on one line using the css
white-space: nowrap;
If you want multiple lines, you can do something like
max-height: 3em; (or whatever value is appropriate)
Beware of how the overflowing content looks as it spills out of the element, it may abruptly clip out of view and look a bit nasty. If it is just text you can use
text-overflow: ellipsis;
But if you are dealing with actual elements, it's more complex! It's possible to create nice fades using only css and pseudo elements though, that's what I would do.
I have a wrapper element which I want to have a fixed width and make it un-scrollable to the sides (it's meant for mobile)
When I give the wrapper overflow-x:hidden I get a strange "borders" at the top and bottom.
you can see here: http://jsfiddle.net/ilyaD/nzGxf/3/
why is that and how can i remove them?
==updated the fiddle==
the overflow hidden does hide the elements that are wider then the wrapper but creates some kind of inner scrolled element with the frame that appears in the screenshot and a persistent scroll-bar
If what you're talking about is the space in between each box, the class "box" is inline-block, so the line-breaks in the markup are interpreted as implied spaces. Place all the inline-block markup on a single line <div></div><div></div>... and the "space" between will collapse.
To add to Jim H.'s answer, you could alternatively display: block; float: left the divs rather than display: inline-block them
I know this kind of question get asked everyday, but I don't seem to find a solution to this particular one...
So, the idea is pretty simple, I want to create a 3 column fixed width layout, with 100% width header and footer.
Everything seems to work aside from the footer.
Here is an example: http://jsfiddle.net/xMQLy/1/
So essentially the problem seems to be that, because the main body + lateral columns does not have a fixed height, the footer is not positioned at their bottom.
How would I go fixing that?
thanks
Using absolute or fixed for the position CSS property rips an element from the context of the parent. So, the parent width/height won't be affected by this child's size. The float properties also have this effect: It's not possible to effectively style using position:absolute/fixed or float.
I've thrown away these properties, and revised your code: #Fiddle: http://jsfiddle.net/xMQLy/5/
Some changes:
Thrown away useless CSS properties:
.wrapper{position:relative;top:0}
`.leftcol and .rightcol {floar:right/left}
Grouped together common styles (.leftcol, .main, .rightcol).
Updated HTML source, added a <div class="wrapper-align"> wrapper around each div in the source, and removed whitespace between these wrappers [1]
[1]The .leftcol, .main, .rightcol elements can be positioned next to each other applying display:inline-block on each div. However, the default alignment for these elements is the bottom. Because the columns have to be located at the top, vertical-align:top has to be used. This CSS property can only be used at inline elements. To achieve this layout without messing with float or display:absolute/fixed, an inline wrapper around a display-block element is necessary.
The whitespaces have to be removed, to prevent creating a gap between the elements. To illustrate, compare these pages: No whitespace vs White space.
I have a collection of floating divs within another div. The child divs are of variable width and height - that is they're populated using dynamic data which I have no control of. Now sometimes what happens if that the last child div has a massive height with a wall of text because it is forced into a small width by the other divs. This only happens in IE 6, 7, 8 - FF3.6 handles it correctly - it makes sure the huge div starts after a line break with a big width.
Is there anyway I can force IE into the same behaviour?
Actually, if you specify a width for that floated div, then it will use that width, or else the floated div will "shrink wrap" to the content. So you can try that, or you can use this style for that float:
#the-last-div { clear: both; float: left }
you may or may not want it floated if you want it to be across the page all by itself.
The only solution to this is one of three: specify clear: both;, specify a default width, or do either or both of these dynamically with jquery/javascript. As long as you are letting the content decide the height and width you are going to run into problems.
Using clear:both; on all divs will put each float onto its own row. This doesn't sound like what you want.
Specifying a width will be the most predictable. The browser will respect the width and will clear to the next line if there is not enough space.
If you are loading content dynamically that requires a specific width then it should be trivial to dynamically adjust the containing div width appropriately. You can perhaps check the length of the content and assign a width to the div receiving the content if the content is too long. Since we don't have your code you'd have to experiment with the length and width to get it right.
Is the content that you're loading simple text or does it contain divs and other block level elements?
How is it floated? is it a mix of float: left; and float: right; ? or is it all to one side?