---
title: "CSS: Element hamnar fel"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/177929-css-element-hamnar-fel"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Dino"
published: "2009-04-08T11:04:12.000Z"
updated: "2009-04-09T21:09:45.000Z"
replies: 2
views: 468
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/177929-css-element-hamnar-fel"
---

# CSS: Element hamnar fel

## #1 — Dino, 2009-04-08T11:04Z

Har lite problem med nedan kod.
1\. Varför hamnar UL utanför #divList?
2\. Varför blir inte UL centerad i #divPager?
3\. Varför hamnar inte #div7 till höger och i mitten i #div6?

Tack.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaa</title>
<style type="text/css">
<!--

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td 
{
     margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:top;
}

body{font:11px/1.4 Verdana, Arial, Helvetica, Sans-Serif;}

#divList
{
     width:300px;
     text-align:center;
     padding:5px;
     border-top:solid 6px silver;
     border-bottom:solid 6px silver;			
     clear:both;
}
#divList ul
{
     list-style:none;
}
#divList ul li
{
     display: inline;
     float: left;
     margin: 5px;
     border:dotted 1px gray;
     padding:10px;
}

#divPager
{
     margin-top:5px;
     text-align:center;
     width:300px;
     clear:both;
}
#divPager ul
{
     list-style: none;
}
#divPager ul li
{
     float:left;
     padding: 6px;
}

#div6
{
     height:30px;
     vertical-align:middle;
     text-align:right;
     border:solid 1px green;			
     clear:both;
}
#div7
{
     width:100px;
     border:solid 1px red;
     vertical-align:middle;
     text-align:left;
}
-->
</style>

</head>
<body>
<div id="divList">
     <ul>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
     </ul>
</div>
<div id="divPager">
     <ul>
          <li><a href="#">1</a></li>
          <li>2</li>
          <li>3</li>
     </ul>
</div>

<div id="div6">
     <div id="div7"><span>hhhhhh</span></div>
</div>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/177929

## #2 — jarvklo, 2009-04-08T21:49Z

> **[Dino skrev:](https://www.webforum.nu/p/1463545)**
>
> 1\. Varför hamnar UL utanför #divList?

 Du har float: left på de li som ligger i den... (float "lyfter upp" li-elementen "ovanför" ul i detta fall)

> **[Dino skrev:](https://www.webforum.nu/p/1463545)**
>
> 2\. Varför blir inte UL centerad i #divPager?

 \#divPager är bara 300px bred och ligger vänsterjusterad...
Fytta bredden fråm #divPager till dess ul, sätt display:block och margin: 0 auto på ul istället

> **[Dino skrev:](https://www.webforum.nu/p/1463545)**
>
> 3\. Varför hamnar inte #div7 till höger och i mitten i #div6?

margin-left och margin-right är noll och inte auto på #div7.
vad gäller höjdcentreringen, så gäller inte CSS vertical-align inuti div-element, så du får ta till en annan metod för höjdcentrering...

Lycka till  :bire

Permalänk: https://www.webforum.nu/p/2178249

## #3 — Dino, 2009-04-09T21:09Z

Tackar så mycket för de svaren.  :)

Permalänk: https://www.webforum.nu/p/2181364

---

Tråden på webben: https://www.webforum.nu/amne/html-css/177929-css-element-hamnar-fel
