CODEWITHSUNDEEP
htmlcss
Deepak Ingole
Deepak Ingole

Reputation: 15742

CSS :: footer alignment and overflow issue

enter image description here

In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width. and also I dont want x axis to scroll as in image.

To solve overflow issue I used,

html {
  overflow:hidden !important;
}

But it does not seems promising to me,

I want something like this ,

enter image description here

footer top border should be aligned with red lines

Fiddle

Upvotes: 0

Views: 69

Answers (2)

DeFeNdog
DeFeNdog

Reputation: 1210

You might want to start by removing width and min-width and also height and min-height.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

You are using position: absolute; so you need to use left: 0; for the .google-footer-bar

Demo

.google-footer-bar {
    position: absolute;
    bottom: 0;
    left: 0; /* Add this here */
    height: 35px;
    width: 100%;
    border-top: 1px solid #ebebeb;
    overflow: hidden;
}

Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.

Upvotes: 2

Related Questions