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
Related
The background color black fills the padding area only As show below and I need it to cover the whole div area.
Html Code
Css Code
Your problem is you floats here is my suggestion make it Flex:
.core {padding:50px;margin:0 auto;max-width:1000px; display: flex;}
https://jsfiddle.net/nwtttmqk/
You can also do inline....but flex is....more flexible (and modern)
Your issue is that when you float an element using css float:left or float:right, the parent container will lose it's natural height that is defined by its children.
You should read this post about floats and clears
You know how on tumblr, the posts on your main page scrolls vertically? I want to do it horizontally. I know I have to use some type of display:inline or display:inline block somewhere. I tried it in my body tag, postbox tag, it doesn't seem to work.
Width in CSS doesn't quite work the same way as height does, and by default, content will always break on whitespace to stay within the width of it's parent.
You can, however, force an element to not wrap any of it's child elements by using white-space: nowrap;
This, in conjunction with overflow-x: scroll; will keep those elements inside a nice scrollable area, rather that pushing out the boundaries of their container.
You were on the right track with using display: inline; or display: inline-block; for keeping the content on the same line.. you could also use float as another alternative, or even table-cell display properties, but those should be a bit more case specific.
Here's an example that I put together, hopefully that should be all that you need:
http://jsfiddle.net/9xkPP/
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.
In these examples (NOTE: make sure you drag out the result window wide enough)
http://jsfiddle.net/pPyaG/
http://jsfiddle.net/pPyaG/1/
http://jsfiddle.net/pPyaG/2/
Why does the quantity of text inside the inline-block elements affect the positioning of the inline-blocks in the same div?
What can I do to make sure all the inline-blocks nested inside the block element have the same vertical alignment with respect to each other?
Add vertical-align: top where you have display: inline-block.
http://jsfiddle.net/thirtydot/pPyaG/3/
The initial value of vertical-align is baseline, which causes the issue you're experiencing.
Read this, particularly the "baseline" section: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
A comparison of how common values of vertical-align look: http://www.brunildo.org/test/inline-block.html
I have a page with some divs that have a width of 800px and margin: 0 auto
to center them.
One of the divs contains an image and the rest of the div is empty, in IE8+ it looks
as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,
is there a quick solution for making the empty area of the div not take space?
the reason I have to keep the blank area is that the fixed with and margin: 0 auto make
the picture align with the other divs that have the same width.
thx in advance!
Try setting line-height:0 and font-size:0 for that element.
It should make the element occupy no space..
just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.
another thing that is possible is to make one of the DIVs' position absolute and then it's
outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take
space in the normal flow.
Yes it does...just put ; after them
I just had the same problem on IE7 and used the answer
line-height:0;
font-size:0;
in the CSS corresponding to that div