CODEWITHSUNDEEP
htmlcssmenuwidthhtml-lists
kim holder
kim holder

Reputation: 1854

Why is this ul exceeding the size of it's div?

Although li.textmenu has width: 140px, padding: 5px, and div.textmenu has width: 150px, the one list item i've made so far has a big left margin, and extends beyond the right edge of the div by at least 30px. What could be causing this and how can I restrict it's width?

http://www.briligg.com/frailty.html

CSS

div.textmenu {
  background-color: #3b3b3b;
  float: left;
  width: 150px;
  margin: 30px 10px 0 30px;
}

li.textmenu {
  background-color: #4a4a4a;
  margin: 0;
  padding: 5px;
  border: none;
  width: 140px;
  list-style: none;
  text-align: right;
}

HTML

<div class="textmenu"> 
  <ul> 
    <li class="textmenu">
      <a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a>
    </li> 
  </ul> 
</div>

Upvotes: 3

Views: 5111

Answers (5)

Charming Prince
Charming Prince

Reputation: 489

Make sure you've calculated the exact width and height of the Li you want to fix inside the Div by making sure the DIV has enough space within it.

div.textmenu {
    background-color: #3b3b3b;
    float: left;
    width: 150px;
    margin: 30px 10px 0 30px;
    }
    li.textmenu {
    background-color: #4a4a4a;
    margin: 0;
    padding: 5px;
    border: none;
    width: 140px;
    list-style: none;
    text-align: right;
    }

Since you made the padding: 5px, calculated by the 2xwidth + height of the Li, the Li should exceed 150px width of the Div box. you can fix by reducing your padding pixel of the LI.

Upvotes: 0

ChrisBenyamin
ChrisBenyamin

Reputation: 1728

Its like smeridan said. There are for all html elements preset styling properties.

I recommend you to use the reset css by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/

You can include it at the top of your document. After that you have more control about your desired styling.

Upvotes: 2

user11977
user11977

Reputation: 1793

The ul has a margin and padding set it on by the browser. You'll want to remove this:

div.textmenu ul {margin:0;padding:0;}

Only the padding affects the width, but you'll probably want to take off the margin too.

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Make sure the ul does not have padding and margin of its own, by resetting it with padding:0;margin:0;

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186562

Did you add a zip/uni reset to the top of your css file?

* { margin:0; padding:0; }

( Put that exactly as is at the very top of CSS to override browser default margins/padding ).

Most likely the ul is being given default padding/margin, so this is to counter-act it.

Upvotes: 3

Related Questions