CODEWITHSUNDEEP
htmlcsscss-float
Dan Cron
Dan Cron

Reputation: 1155

Place ul in lower left corner

What is the best way to place a ul in the lower left corner of a div?

This is the closest I could come up with, using ul. http://jsfiddle.net/dan_cron/jUef2/

If I get rid of the ul, and use a div instead, I can do it. http://jsfiddle.net/dan_cron/jUef2/0/

html

<div class="big">
     <ul class="middle_left"> 
         <li>Small left</li>
     </ul>   
     <div class="middle_right">
         Big right
     </div>
</div>

css

.big {
    overflow: auto;
    position: relative;
    border: 1px solid;
}
.middle_left {
    border: 1px solid;
    position: absolute;
    bottom: 0px;
}
.middle_right {
    float: right;
    border: 1px solid;
    line-height: 48px;    
}

Upvotes: 0

Views: 184

Answers (3)

张宇云
张宇云

Reputation: 1

add "margin:0px" can by useful

Upvotes: 0

Dan Cron
Dan Cron

Reputation: 1155

The reason that the ul is working differently from the div is because of the default style sheet(s) supplied by the browser.

Here is a short article describing default style sheets. http://www.lifeathighroad.com/web-development/understanding-a-browsers-default-css/

Here is a chart of specific information on the different browser defaults. http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

Looking at the chart, in most situations, the browser supplies a default margin of 1em on the top and bottom of a ul. While a div does not have a default margin, so the default margin on a div is 0.

The answer from bentedder solves the issue by overriding the browser's default margin for ul.

In Firebug, by default, viewing the browser's default CSS styles is off. To turn it on, in Firebug, on the HTML tab, on the the Style tab, select "Show User Agent CSS".

Upvotes: 0

bentedder
bentedder

Reputation: 806

If you add "margin:0px" to your UL then it should work.

Upvotes: 3

Related Questions