CSS Positioning

Posted on 2009-04-16
Last Modified: 2013-11-19
I am trying to make a <hr> horizontal rule appear about 10 pixels above the bottom border regardless of how much content is in the containing <div> ... what is the best way to do this so that it works in all browsers and also stays in the right place regardless of  the the size of the browser window.

you may view my page at :

Question by:v2au
    LVL 42

    Expert Comment

    by:David S.
    Any style you apply to it won't do much because it's overflowing the bottom of #mainContent which has a fixed height.

    Author Comment

    Hmm . can you take a look now , i have edited the page , mainContent is not overflowing.  

    So if it is not overflowing.  is there a way to absolutely position the <hr> within the mainContent div regardless of how much content is contained within it ( as long as its not overflowing ) .  basically each
    page is going to have a varying amount of content but i want the <hr> to be displayed at a fixed 10px above the baseline.   if this will not work , could you suggest another way of acheiving this (image replacement)  
    basically i am a novice at this but very eager to learn.

    LVL 42

    Accepted Solution

    The text isn't overflowing anymore but the <hr> is still.  Giving a fixed height to an element that contains text is usually a bad idea.

    Anyway, one way to do this would be to give #mainContent position:relative to create a new positioning context and then use this rule:
    #mainContent hr {
      bottom: 5px;
      left: 25px;
      margin: 0;
      position: absolute;
      width: 160px;

    Open in new window

    LVL 3

    Expert Comment


    Try to remove the <br> tag. If you don't want to remove the <br> tags then add this CSS along with your existing style

    br {

    this will solve your problem.
    LVL 58

    Expert Comment

    This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    The viewer will learn how to count occurrences of each item in an array.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now