1

I have a #info div element which shows some text strings like below:

<body>
    ...

   <div id="info">
       ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
   </div>
</body>

I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:

#info{
    width:100px; 
    margin:0px auto;
}

With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).

I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?

-------------------- UPDATE ------------------

I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?

4
  • Have you tried setting a height for the DIV?
    – Chris Bier
    Sep 24, 2011 at 19:51
  • there's not enough information here. Can you provide a demo maybe? Sep 24, 2011 at 19:52
  • There is nothing in the code shown that would do that. Is that your actual code? Can you show a working example that behaves like that?
    – Guffa
    Sep 24, 2011 at 19:53
  • Yes, I tried to set also height e.g. 100 px, but the problem is still there.
    – Leem.fin
    Sep 24, 2011 at 19:53

3 Answers 3

4

My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.

1
  • Yes, as my code shows there is something above the div, I used '...' to indicate that. I have another div above the #info div, how to CSS the #info div to be located below the upper div ??
    – Leem.fin
    Sep 24, 2011 at 19:58
1
<html>
<head>
 <link rel="stylesheet" href="css.css" type="text/css">
</head> 
 <body>
  <section>
   <div id="info1">
     asdgfawregawregawregawregawregawregaweg
   </div>
   <div id="info2">
     asdgfawregawregawregawregawregawregaweg
   </div>
  </section>
 </body>
</html>

css file:

#info1 {
 color: red;
}

#info2 {
 width:100px; 
 margin:0px auto;
}

So... all displayed. Maybe you give not enough information...

0

I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.