CSS Issue - Scroll on bottom box margin - css

Trying to apply margin-bottom to the box looking like this:
It seems like when you have overflow: auto or scroll; it just cuts off text like this, and applies margin on the bottom on the element. Any way I can make this margin before someone scrolls down?

Related

How to block scrolling without "jumping"

Well i know about overflow-y: hidden, but I dont like that my site "jumps" to the right side like for 20px every time i use overflow-y: hidden.
Is it possoble to block scrolling without "jumping"?
here is example http://jsfiddle.net/wjyb8tzw/6/
Just give a margin or padding of 20px at the right side.
padding-right:20px;
The line overflow-y disables the scrollbar on the right, this changes the maximum width of the webpage.
The line margin: auto centers the div based on the maximum width of the webpage, therefore disabling the scrollbar moves the div a little to keep it centered.
If you specifically don't want the div to be centered then use margin-left: -17px; as the width of the of the scrollbar is 17 pixels as stated here.

CSS Menu central alignment

I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/

Is it possible to make a scroll bar outside of the content it's scrolling?

Now, if the background weren't textured I could do some CSS trickery with padding / margins and such.
When you do a scrollable div (which is what I'm doing now) like this:
overflow: auto;
height: 80%;
the scrollbar appears on the inside of the div that is being scrolled
Here is a mock up of what I'm trying to do:
Something like this:
http://jsfiddle.net/p75LE/2/
?

Padding in a div where other divs are floated

Here is the JSFiddle link:
http://jsfiddle.net/stapiagutierrez/48yGU/34/
When I use padding: 10px; on the #middle div, I thought it would make the contained divs inside become smaller to fit the padding.
This is partially true, it's pushed from the top and left/right, but it's overflowing from the bottom.
Any explanation for this, and a solution for this common case? So far, I've used overflow: hidden; but this feels like a hack. But maybe since I'm new to CSS this is how you're supposed to handle it.
You need to add clear after the floats like this: http://jsfiddle.net/48yGU/38/
Edit: the reason its overflowing from the bottom is because float does not have size. so the container thinks there is nothing there and just draws the padding on both sides (thats why it looks line height). what clear does is it sticks to bottom of floats and have size, so its pushing the container bottom to the bottom of the floats.
It's because the floated DIVS are positioned out of the normal flow, in which padding would normally consider the height and width of contained elements.

HTML: I want to create a DIV thats horizontal centered and reaches from the top to the bottom

I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/

Resources