CODEWITHSUNDEEP
htmlcsspositioning
Gintas B
Gintas B

Reputation: 17

How to make div at the bottom center all the time?

I'm making website for the first time and it's very hard for me on some simple tasks. Like right now I'm stuck at this problem. I have one div which floats left and another one which floats right. At some pages div at the left is bigger than div at the right, sometimes it's opposite.

I need one more div which stays at the bottom center no matter which (left or right) div is bigger. Right now I managed to do it work only if div at the left is bigger than div at the right.

Sorry it's confusing and hard to explain, the problem is probably positioning, but I can't figure out myself how to make it work.

In short: Need ID bottom to be at the bottom center, below other divs. Forgot to mention: If I move divs, it messes up on different screen sizes.

<div id="bottom"><p>How to Make this text to be at the bottom center all the time?</p></div>

Example is here (check ID bottom): http://jsfiddle.net/ZMLyz/61/

Upvotes: 1

Views: 199

Answers (4)

zhirzh
zhirzh

Reputation: 3449

well, the problem is not in css, but rather in the HTML.

You've placed the div id="bottom" within the "div style="float:left;" element. That is why the bottom bar appears to be flying in between. But in reality, it is exactly where you placed it, with the css doing exactly what it's supposed to.

Solution:

In your updated fiddle, please note lines 89 and 90 in HTML.
1. Line 89 is being used to clear float property for upcoming elements.
2. Line 90 is the bototm div.

As for the css, strting from line 15, I've made some changes but it's all the same before that line.

Upvotes: 0

Dhaval
Dhaval

Reputation: 2379

Give style margin-top: Xpx

Here's the example: http://jsfiddle.net/ZMLyz/62/

Upvotes: 0

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

#bottom
{
  position:absolute;
  width:100px;
  margin-left:-50px;
  bottom:20px;
  left:50%;
}

Upvotes: 1

Matt Greenberg
Matt Greenberg

Reputation: 2330

Give it a set width and set the margin to auto. This will center the div in its parent container. You also need to clear both left and right divs since your dealing with floats.

#bottom{
  width:800px;  /*make the width whatever you want*/
  margin:auto;
  clear:both;
}

Good Luck

Upvotes: 0

Related Questions